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

时间:2011-07-14 15:21:03

标签: html css mobile mobile-safari

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

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

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

感谢。

5 个答案:

答案 0 :(得分:70)

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

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

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

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

答案 1 :(得分:31)

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

未分配width: 100%标题与页脚的内容相同{。}}。

答案 4 :(得分:0)

只是预感,因为我实际上无法测试它,但是您在footbar中的foot元素设置为绝对宽度(以像素为单位),而footbar设置为% - 与标题元素相同 - 尝试将这些元素切换为%也是?