100%宽度Css仅限于移动游猎

geo*_*rge 26 html css mobile mobile-safari

以下是相关网站:www.prestigedesigns.com

问题是我的页眉和页脚不会延伸到指定的100%,而只能在iPhone/iPad上.

我已经尝试了我认为的一切,我真的可以使用一些帮助?还有其他人有类似的问题吗?

谢谢.

Wal*_*ron 70

这是移动Safari的视口问题,但你可以通过缩小桌面浏览器窗口的宽度并向右滚动来获得相同的效果,你会看到你的背景开始退出.

这是因为当你设置width:100%你的#top#headerdiv时,你告诉他们调整大小到包含元素的宽度,在这种情况下是浏览器窗口(或视口).你没有告诉他们调整内容的内容.

Mobile Safari的默认视口宽度为980px,因此它980px用作div的包含元素的宽度.这就是为什么你的布局大约1050像素,它的背景被砍掉了.

您可以通过直接设置其视口(阅读Apple的文档)或添加min-width:设计宽度(以像素为单位)来为移动Safari修复此问题.到你的body.Mobile Safari将使用该min-width值来设置其视口,并且还可以防止它在桌面浏览器中发生.

  • 谢谢!body {min-width:980px}解决了这个问题. (2认同)

小智 32

设置视口以在任何设备上调整页面.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Run Code Online (Sandbox Code Playgroud)