CSS上查詢釐米或DPI未像素

我創建一個網頁是專用於特定尺寸，而不是像素特異性（即釐米或英寸而不是像素寬度）CSS上查詢釐米或DPI未像素

當在不同的手機測試我注意到有時設備的分辨率可能非常高，使得屏幕上的對象非常小，而我想讓用戶查看它們。

我使用的查詢，像這樣的：

@media screen and (min-width: 0px) and (max-width: 400px){ 
    /*2 rows*/ 
    .a1x1, .a1x2{ 
     width:50%; 
    } 
    .a3x3, .a3x2{ 
     width:100%; 
    } 
    .a2x3, .a2x1, .a2x2{ 
     width:100% 
    } 
} 
...etc

我知道我可以使用查詢列表是here at w3schools，但我不知道我會用一個什麼或如何實現它。

任何幫助表示讚賞！（請把例子，如果你可以：d）

編輯：

對不起，不存在這樣一個問題完全具體，讓我提供什麼，我試圖實現一個完整的描述。

我有一個頁面，將顯示基於網格的頁面中的媒體（主要是圖像）。當頁面是桌面大小時，它將顯示5列寬。當它是平板電腦大小，我想顯示4列。根據移動設備（小型/電話）的大小，我希望媒體以2列或3列顯示。問題是：在三星Galaxy S IV等具有非常大分辨率/ PPI的設備上：它們顯示全部5列，使得媒體看起來很小 - 消除了我試圖實現的全屏效果。

所以問題是：

我怎麼會探測到極小的設備屏幕和適當的進入我的 CSS編碼呢？

到目前爲止this blog post一直是最有幫助的。

來源

2014-11-21 ChiMo

嗯，你能詳細說明你爲什麼要這麼做嗎？我不認爲這可能正是你已經陳述的原因（不同的設備具有不同的分辨率）。 – 2014-11-21 08:02:30

什麼問題？看起來您確實擔心小型設備的默認縮放比例，在這種情況下請參閱https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag – 2014-11-21 08:14:21

網絡不是PDF：如果你想要這樣的控制，瀏覽器供應商會給你很大的困難......例子：如果您的內容顯示在iPad Mini或其他iPad上（[ALA vexing vewport]（http://alistapart.com/article/vexing-viewports）），祝您好運。這說了一些關於視口的信息：http://www.quirksmode.org/mobile/overview.html – FelipeAls 2014-11-21 10:54:26

所以我終於有時間查看發佈的鏈接作爲答案。（耶！）看來，如果設備具有顯示整個網站的決議，它會。我固定它通過添加這個小美女：

<meta name="viewport" content="width=device-width, initial-scale=1">

這將強制爲1 1顯示沒有任何放大設備。雖然我相信這可能會有所不同，或者不支持其他移動設備。

來源

2014-11-24 00:08:33 ChiMo

CSS上查詢釐米或DPI未像素

回答

相關問題