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

Question

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

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

编辑:

我注意到此页边距在某种程度上受到侧面箭头边距的影响(用于通过幻灯片列出)。按钮的样式具有以下 id

#prevslide   and   #nextslide

编辑 2:

由于代码很长，我会在这里发布网站中使用的样式表的链接。

幻灯片样式表，#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;
  }