防止iPad移動Safari通過CSS切斷內容

雖然寬度超過iPad的分辨率，但我不明白爲什麼它只是不增加橫向滾動而不是截斷。

任何有關如何最好地適應這一點的見解將不勝感激。

該網站是here並附上截圖。

這可能是代碼的問題的一部分：您正在編輯

#wrapper { 
position:relative; 
width: 1180px; 
margin: 0 auto; 
}

iPad acreenshot

來源

2012-08-16 jsuissa

這可能與您裁剪視口的事實有關。嘗試從''中刪除此行，並讓我們知道是否發生相同行爲： ' – 2012-08-16 19:12:10

Yup ，看起來像同樣的切斷問題。我試過調整meta標籤，但沒有運氣。現在我完全刪除它。 – jsuissa 2012-08-16 19:17:46

如果您從包裝divs中刪除overflow:hidden，您將獲得所需的外觀。我剛剛在我的新iPad上使用Adobe Shadow的遠程檢測（demo）進行了確認。這樣做了以後，你要恢復的視口剪切與meta標籤，以防止滾動： <meta content="width=768px, minimum-scale=1.0, maximum-scale=1.0" name="viewport">

有趣的是，一些在你的代碼是制約你<body>元素的寬度。跟蹤下來可能會產生更好的解決方案。

來源

2012-08-16 19:26:54

謝謝。它工作完美。想知道寬度限制是CSS試用Adobe Edge的產品。 – jsuissa 2012-08-16 19:44:13

我也恢復了元標記。現在我假設如果我調整'最小規模'我可以水平地'適合窗口'？ – jsuissa 2012-08-16 19:45:45

使用'width = device-width' – 2012-08-16 19:47:05

假設這是你的網頁，而不是iPad的錯... 在你的CSS我建議要麼將寬度設置爲自動或100％以嘗試修復它？

是不是一個Ipad的屏幕1024px，比你設置它的小？根據其他代碼，你可能會迫使它比屏幕允許更寬？

也請做上面的建議。沒有注意到，直到他指出。

來源

2012-08-16 19:09:05 jos

防止iPad移動Safari通過CSS切斷內容

回答

相關問題