只在移动Safari

这里100％宽度的CSS问题是有问题的网站：www.prestigedesigns.com 只在移动Safari

的问题是，我的页眉和页脚不会延伸到其指定的100％，但仅适用于iPhone/iPad上。

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

谢谢。

2011-07-14 george

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

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

Mobile Safari的默认视口宽度为980px，所以它使用980px作为div的包含元素的宽度。这就是为什么你的布局是1050px左右，它的背景被切掉了。

可以通过直接设置其视口（读Apple's Docs），或通过添加min-width:宽度以像素为单位设计的解决这个问题的移动的Safari;到您的body。 Mobile Safari将使用min-width的值来设置它的视口，并且它也会防止它在桌面浏览器中发生。

2011-07-14 17:02:55

谢谢沃尔特。我很欣赏它，现在它在iPhone/iPad上看起来不错。 – george

谢谢！ body {min-width：980px}修正了这个问题。 –

thx为此...正在破坏我的头。 – chris

它没有分配width: 100%标题变得width: 1009px;与页脚相同的东西。

2011-07-14 15:29:43

嘿大卫。标题如何获得1009px？我很困惑。因为它会在该px的桌面浏览器上呈现的情况。但不是。多数民众赞成在什么我感到困惑 – george

看起来像我看错了，你的网页似乎不能很好地在Safari浏览器。我的猜测是头部嵌套在头部的方式。您更可能有一个与iPhone –

视口问题，它在我的Safari浏览器（mac）上看起来确定。它可能是一个视口问题。它驱使我坚果 – george

只是一种预感，因为我无法实际测试，但同时footbar设为％footbar内你有脚件被设置为绝对宽度以像素为单位 - 与你的头元素是相同的 - 尝试切换这些也是％？

2011-07-14 15:34:37 allanmayberry88

事实上，如大卫说上面，头没有被分配一个'宽度：100％;'在所有 – allanmayberry88

即时困惑我的CSS有一个包含div #top设置为100％，然后一个包含div #topbox设置为在页面中的顶部元素在1024页宽的页脚/页眉中居中排列的顶部元素 – george

#top正在被另一种风格覆盖，请尝试！宽度为100％时重要 –

设置视口以使您的页面适应任何设备。

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

2012-04-25 15:27:58 helpyou

完美，谢谢！ –

在CSS文件中设置min-width:(Width of your design)px;，这个问题就解决了。

2014-03-25 16:03:41

回答