iphone - query教學 - media screen 1280




如何在一個媒體查詢中定位iPhone 3GS和iPhone 4? (3)

BoltClock的回答對我來說似乎很不錯。

但是,考慮到未來,如果Apple(或其他製造商)發佈設備像素比為2的其他設備,此媒體查詢也將用於此設備。

我不認為這是不可能的,因為我認為這會發生,並且新設備可能會有更大的屏幕,例如帶有視網膜顯示屏的iPad。

使此查詢僅適用於iPhone 4和以前的iPhone(以及類似大小的任何其他設備)

@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
}

目前不確定[[IPHONE_4_WIDTH]] - 我沒有一個,一些網站說480 ,有些人說960 。 嘗試用兩者替換。 (讓我知道你發現了什麼:))

我正在嘗試為iPad / iPhone和舊款iPhone實現替代佈局。

我已經確定最好的方法是使用CSS3規範中的@media

因此,這些是我的媒體查詢:

@media screen and (max-width: 1000px) { ... }

以上是小型台式機和筆記本電腦屏幕。

@media screen and (max-width: 700px) { ... }

以上是適用於iPad和非常小的台式機/筆記本電腦屏幕。

@media screen and (max-device-width: 480px) { ... }

以上是iPhone 3GS和移動設備。

然而,新的iPhone 4與史蒂夫喬布斯全唱的全視覺“視網膜”顯示意味著它的像素比率為2-1意味著1像素實際上在瀏覽器中顯示為2x2像素使其分辨率(960x640 - 意味著它將觸發iPad佈局而不是移動設備佈局)因此這需要另外的媒體查詢(僅限webkit支持):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

現在,問題是......我想要一個與iPhone 3GS和移動設備佈局合併的漂亮閃亮的新iPhone 4佈局,因為它們都具有完全相同的內部CSS代碼,

因此提出我的問題;

如何創建一個將iPhone 4,3GS和其他手機指向相同樣式的@media規則?


我一直在尋找一種方法,根據請求的第二部分專門針對iPhone 3 / 3GS。 我發現最可接受的解決方案是將媒體查詢定制為iPhone 3的固定參數。

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

為了工作,此查詢要求您使用Safari的視口元標記將瀏覽器修復為100%,具體如下:

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

還有少量的Android手機也可以通過該查詢獲取。 隨著Android Market在潛在屏幕尺寸範圍320x480中顯示18.4%的有效手機,其中只有一部分將與股票webkit瀏覽器上的設備像素比率相匹配。 不完美,但總比沒有好。

電話分辨率列表

所有信息均被視為截止日期。

另外,根據mernen的評論#2,他的帖子是按像素密度定位Android設備的文檔: http://developer.android.com/guide/webapps/targeting.html#DensityCSShttp://developer.android.com/guide/webapps/targeting.html#DensityCSS


由於iPhone和iPod touch以邏輯像素而不是物理像素測量max-device-width ,即使使用Retina顯示器(因為它們應該),因此用於iPhone的原始媒體查詢應該足夠:

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

如果您需要單獨定位Retina顯示器,則只需要(-webkit-min-device-pixel-ratio: 2)





media-queries