iPhone 浏览器向某些 DIV 添加右侧边距
我正在整理的网站应如下所示： GB 个人训练
这是 iPhone 上的样子： iPhone 浏览器
如您所见，它推送到 #wrap 和 #outer -wrap DIV，以便其中的背景图像有右边距，我不知道为什么。我只能访问 custom.css 文件，不能访问 HTML。
我目前正在编辑它的克隆： gbptclone.live.subhub.com/
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在
body中定义max-width。像这样写：将其添加到 HTML
head中：Define
max-widthin yourbody. Write like this:add this inside your HTML
head:实际上，这将阻止用户缩放内容（从用户端体验来看，这很糟糕）：
相反，在我看来（我不是专家），您应该使用：
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
Instead, in my opinion (and I am no guru), you should use:
尝试设置 #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 问题）。
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).