3

我正在测试一个网站：这个网站

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

编辑：

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

#prevslide   and   #nextslide

编辑2：

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

幻灯片样式表、#prevslide、#nextslide样式规则可以在第二个样式表

Style1
Style2中找到

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

主要风格

4

2 回答 2

2

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

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

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

于 2012-08-10T11:12:59.650 回答
2

看起来你的问题是因为你的 CSS 中的 % 和像素的组合。

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

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

  body {
    min-width: 1020px;
  }
于 2012-08-11T23:49:10.663 回答