iPad、Safari 浏览器中出现异常边距

Question

我正在测试一个网站：This Website

当我偶然发现以下问题时。在我在计算机上测试的所有浏览器（IE、Chrome、Safari、Firefox 等）中，一切看起来都是正确的，但是当我在 iPad 上测试这个网站时，在 safari 浏览器中，我在右侧得到奇怪的边距，我无法显示屏幕截图，但简而言之，所有网站页面都像您在计算机上看到的那样，但移到了左侧（因此右侧有空白区域）。谁能提出是什么原因造成的？

编辑：

我注意到这个边距在某种程度上受到您可以在侧面看到的箭头边距的影响（用于通过幻灯片列出）。按钮的样式具有以下 id

#prevslide   and   #nextslide

EDIT2：

由于代码很长，我将在此处发布网站中使用的样式表的链接。

幻灯片样式表，#prevslide，#nextslide样式规则可以在第二个样式表中找到

Style1
Style2

还有我用来设置网站外观样式的主样式表，但我认为问题不在于它。

Main Style

Answer 1

看起来您的问题是由于您的 css 中的 % 和像素的组合。

例如，您的 .header 包装器设置为 100%，但其中的 .in-header 设置为 1020px。只要您的浏览器窗口宽于 1020 像素，这很好，但是当它缩小时，.header 会根据浏览器窗口调整自身大小，而 .in-header 则不会。

在你的 body 元素上设置 min-width 属性，这样它就不会小于你的主页元素的大小：

  body {
    min-width: 1020px;
  }

Answer 2

您需要在 ipad（和移动设备）的标题中设置元标记：

<meta name="viewport" content="width=device-width" />

这指示浏览器设置页面正文以匹配平板电脑大小。我不是 100% 确定这是您想要的确切设置，但我没有方便测试的 iPad；无论解决方案如何，它都在这个标签中。