針對具有響應式設計（CSS媒體查詢）的iPhone4，就好像更低分辨率

這一定是以前回答，但我找不到相關的問題。針對具有響應式設計（CSS媒體查詢）的iPhone4，就好像更低分辨率

我設計了一個響應式網站，用css媒體查詢一路下來，正確顯示在320寬。

我想要的是iPhone4（640 x 960）在縱向模式（640寬）時堅持媒體查詢，就好像它的顯示寬度= 320像素。理由：即使iphone擁有更多的像素，我也希望向這些用戶顯示簡化的佈局，類似於非高密度手機的用戶。

通過爲這些高像素密度手機指定一些meta標籤來實現這一點的任何方式，例如？

當然，我可以使用min-device-pixel-ratio: 2爲iphone 4等定義單獨的媒體查詢，但這會導致單獨的css媒體查詢（一個用於低位，另一個用於高像素密度），它們本質上具有相同的邏輯，對我來說看起來很乾燥（http://en.wikipedia.org/wiki/Don%27t_repeat_yourself）

奇怪的是：新的Ipad 3，像素密度2，是否正確呈現我想要的方式，即：它模仿（至少與CSS媒體查詢有關）具有一半分辨率的設備。

來源

2012-07-05 Geert-Jan

的iPhone 4（和4S）將本meta標籤迴應：

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

這是「初始規模」的一部分，你是後。它將使高分辨率設備像320像素寬（或橫向480）。

有other bugs around landscape orientation，你應該知道。

另外，請記住，有一個orientation parameter available媒體查詢：

@media screen and (orientation:landscape) { 
/* Landscape styles */ 
}

來源

2012-07-05 17:57:14 chipcullen

謝謝，確實正是我一直在尋找。你可能想要改變的小錯誤：你在狀態'640'，這應該是'480在橫向'imo – 2012-07-05 18:05:46

你是對的 - 正在修復... – chipcullen 2012-07-05 18:55:18

我使用''。這就是[波士頓環球]（http://www.bostonglobe.com/）所使用的。 – 2012-11-05 03:58:55

第一：我覺得有一個在你的問題一個錯字 - 一個640x960的顯示屏，640寬是波泰特模式，而不是景觀。縱向是縱向，橫向是橫向。

這就是說，如果我正在讀你的問題，你問的是如何使用寬度的媒體查詢針對視網膜顯示iphone。

答案是，你不能 - 視網膜顯示iphone和非視網膜顯示器報告自己的瀏覽器爲320x240。差，如你所指出的，是視網膜顯示器具有2倍的像素密度，這可以用媒體查詢目標：

.avatar { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: url("50x50-avatar.png"); 
} 
@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
    .avatar { 
    background: url("100x100-avatar.png"); 
    background-size: 50px 50px; 
    } 
}

此示例是用於在視網膜顯示器上顯示高分辨率的圖像，但是可以使用調整視網膜顯示器佈局的相同技術。

因此，簡而言之，首先爲非視網膜顯示器編寫樣式，然後使用媒體查詢添加視網膜顯示覆蓋，這應避免干擾問題。

針對具有響應式設計（CSS媒體查詢）的iPhone4，就好像更低分辨率

回答

相關問題