iPhone 浏览器为某些 DIV 添加右侧边距答案

【问题标题】：iPhone browser adding right hand margin to some of the DIVsiPhone 浏览器为某些 DIV 添加右侧边距
【发布时间】：2012-03-12 15:43:45
【问题描述】：

这是我整理的网站的外观： GB Personal Training

这是它在 iPhone 上的样子： iPhone Browser

如您所见，它推入了#wrap 和#outer-wrap DIV，因此它们中的背景图像有一个右边距，我不知道为什么。我只能访问 custom.css 文件而不是 HTML。

我目前正在以下位置编辑它的克隆： gbptclone.live.subhub.com/

【问题讨论】：

标签： iphone css html safari margin

【解决方案1】：

在您的body 中定义max-width。像这样写：

body {
    min-width: 1000px;
}

将此添加到您的 HTMLhead:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

感谢您的建议，但似乎没有任何改变。目前正在克隆该站点：gbptclone.live.subhub.com
我看看能不能让开发者添加进去。谢谢

【解决方案2】：

尝试为#outer_wrap 和#wrap 设置宽度（您可能想要100%）。

Mobile Safari 似乎正在扩大#visual-portal-wrapper div 的大小，但这还不够，因为 Safari 会调整文本大小以供 iPhone 显示。您可以使用 -webkit-text-size-adjust: none; 来更改它。但这会使 iPhone 用户的链接尺寸过小。这就是为什么它适合普通浏览器而不适合 Mobile Safari。

更改 div 的宽度应该会阻止它们的内容扩展超出其边缘（默认情况下它们是 974px，因为这就是 #visual-portal-wrapper 的含义，但所有内容都会溢出并导致视觉错误）并且有背景图像似乎被截断。您可能还想为 #outer_wrap 添加背景定位，因为它在屏幕截图上与我在 Firefox 中看到的略有不同。

编辑：或者，您可以尝试更改宽度：974px；在#visual-portal-wrapper div 到 min-width: 974px;，当然要确保你考虑到 IE 的 min-width 问题）。

【讨论】：

谢谢。虽然即使我使用 -webkit-text-size-adjust: none;它仍然在右侧有空间。我需要为哪些特定的 DIV 添加宽度，因为内容中有很多？
如果我没看错的话，#outer_wrap 和 #wrap div 没有指定宽度，大概是因为 #visual-portal-wrapper div 的 974px 应该足以展开它们足够宽以显示它们的背景图像。我的猜测是它们在 Mobile Safari 上正确扩展为 974px，但随后 #visual-portal-wrapper 溢出，因为 974px 在该浏览器上不够宽。不幸的是，尽管溢出，实际的 974px 宽度已经在 CSS 中设置并且无法更改，因此 2 个包装器 div 没有正确加宽。
#visual-portal-wrapper 的 1000 像素宽看起来好多了，现在只是一个很小的空间。

【解决方案3】：

实际上，这会阻止用户缩放内容（从用户端体验来看，这很糟糕）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

相反，在我看来（我不是大师），您应该使用：

<meta name="viewport" content="width=1000px">

【讨论】：