防止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切断内容

回答

相关问题