iPhone/iPad視口問題

我一直在嘗試最近進入響應式設計。目前我遇到的唯一問題是iPad和iPhone上的視口問題。iPhone/iPad視口問題

當我將Initial-Scale設置爲1時，即使將媒體查詢設置爲寬度640px，它似乎也會在iPhone（視網膜）上翻倍頁面大小。請注意，就我所見，媒體查詢工作正常，所有事情都會根據情況進行調整。我可以通過雙擊或每次頁面加載時縮小或通過將初始縮放比例設置爲0.5來解決雙縮放問題。將其設置爲0.5的問題是，當您在iPad上查看它時，它的大小隻有屏幕的一半。 1.0似乎在iPad上工作，但似乎在iPad上加倍（iPad和iPhone有單獨的媒體查詢）。

摘要：iPhone上的Scale 1.0將頁面縮放倍數提高一倍，可以在iPad上正常播放。在iPhone上縮小0.5，在iPad上縮小一半。

任何人都知道我可能做錯了什麼？

感謝

來源

2012-10-09 Aaron Fisher

只是一個問題，當你拿出'initialScale'屬性時會發生什麼？ – Jon

@Jon問題似乎消失了。但是當你從縱向轉到橫向時，它會自動縮放，但是這是一個iOS bug /功能嗎？如果關閉用戶縮放，則意味着該網站在旋轉時將保持縮放。 –

@TheTechBox來自[Normalize.css]的這個規則（http://necolas.github.com/normalize.css/2.0.1/normalize.css）可能對你有用：'/ *在取向之後防止iOS文本大小調整更改，而不禁用用戶縮放。 * /''html {-webkit-text-size-adjust：100％; }' – Giona

沒有爲「像素率」，這樣就可以針對更高分辨率的設備媒體查詢：

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5) { 

}

此外，你設置的視口元標記width=device-width？

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

來源

2012-10-09 23:06:26

針對iPad的高分辨率設備（pre-retina）會有效嗎？ –

iPhone/iPad視口問題

回答

相關問題