100％宽度Css只发布在移动safari上 [英] 100% width Css issue only on mobile safari

问题描述

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

Here is the site in question: www.prestigedesigns.com

我已经尝试了我认为的一切，并且我的标题和页脚不会伸展到他们分配的100％我真的可以使用一些帮助？有没有其他人有类似的问题？

I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?

谢谢。

推荐答案

p>这是一个视口问题与移动Safari，但你可以得到相同的效果通过缩小桌面浏览器窗口的宽度和向右滚动，你会看到你的背景开始辍学。

It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.

这是因为当您将 width：100％设置为 #top #header div，您要告诉他们调整包含元素的宽度，在这种情况下是浏览器窗口（或视口）。

This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.

移动Safari的默认视口宽度为 980px ，因此它使用 980px 作为div的包含元素的宽度。

Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.

您可以通过直接设置其视口来修复此问题（请阅读 Apple的文档），或者添加 min -width： 设计的宽度（以像素为单位）;到您的正文。 Mobile Safari将使用 min-width 的值来设置其视口，并且还会阻止它在桌面浏览器中发生。

You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.

这篇关于100％宽度Css只发布在移动safari上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！