100% 宽度 Css 问题仅在移动端 safari

Question

这是有问题的网站： www.prestigedesigns.com

问题是我的 header 和页脚不会伸展到他们指定的 100%，但只能在 iPhone/iPad 上。

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

谢谢。

Answer 1

这是移动 Safari 的视口问题，但是您可以通过缩小桌面浏览器 window 的宽度并向右滚动来获得相同的效果，您会看到背景开始消失。

这是因为当您将width:100%设置为#top和#header div 时，您是在告诉它们调整包含元素的宽度，在本例中是浏览器 window（或视口）。 您不是在告诉他们调整大小以适应其中的内容。

Mobile Safari 的默认视口宽度是980px ，因此它使用980px作为 div 的包含元素的宽度。 这就是为什么您的布局（大约 1050 像素）的背景被切掉了。

您可以通过直接设置其视口（阅读Apple 文档）或添加min-width: width of your design in pixels来为移动 Safari 修复此问题； 到你的body 。 Mobile Safari 将使用min-width的值来设置其视口，并且它也将阻止它在桌面浏览器中发生。

Answer 2

设置视口以在任何设备上调整您的页面。

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

Answer 3

设置min-width:(Width of your design)px; 在 CSS 文件中，此问题将得到解决。

Answer 4

它没有分配width: 100% header 正在获取width: 1009px; 与页脚相同。

Answer 5

只是一种预感，因为我实际上无法对其进行测试，但是您在 footbar 中的 foot 元素设置为以像素为单位的绝对宽度，而 footbar 设置为 % - 与您的 header 元素相同 - 尝试将它们切换为 % 吗？