Question

这就是我放在一起的网站应该如何看待： GB Personal Training

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

正如你所看到的，它推入了#wrap和#wood-wrap DIV，因此它们中的背景图像具有正确的边距，我不知道为什么。我只能访问custom.css文件而不能访问HTML。

我正在编辑它的克隆： gbptclone.live.subhub.com /

Answer 1

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

body {
    min-width: 1000px;
}

在HTML head中添加：

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

Answer 2

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

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

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

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

Answer 3

尝试为#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;在#video-portal-wrapper div到min-width：974px;当然要确保你考虑到IE的最小宽度问题。）

iPhone浏览器为一些DIV添加右手边距

3 个答案: