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

Posted 2023-03-12

【中文标题】iPad、Safari 浏览器中出现异常边距

【英文标题】：Unusual margin appears in iPad, Safari Browser

【发布时间】：2012-08-10 10:33:21

【问题描述】：

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

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

编辑：

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

#prevslide   and   #nextslide

EDIT2：

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

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

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

Main Style

【参考方案1】：

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

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

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

  body 
    min-width: 1020px;
  

【讨论】：

嗨 thnx 它现在可以工作了 ;)) ，但是其中一个箭头仍然有奇怪的边距，它是 #nextslide 箭头，它的样式在我的问题中添加的 Style2 链接中可用。最初设置为 margin-top: 50%; ，但是当我将其更改为不同的值时，网站上的所有内容都搞砸了，我认为这个 margin-top 是导致问题的原因。也许您对为什么会发生这种情况有任何想法？

您好，您的示例网站消失了，您的问题描述了与 css 不同的内容。页面在 Chrome 中看起来很好（没有 iPad）。所以一切都起来，盲目飞行！也就是说，我的第一个想法是找到一种方法将幻灯片放入具有 position: relative 的包含 div （宽度为 1020 的现有元素或新元素）。使用 % 进行垂直定位可能会有问题； & 有时边距会在同级元素之间产生不良影响。

【参考方案2】：

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

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

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

【讨论】：

啊，我刚刚在传统的 Chrome 浏览器中查看了您的网站，窗口尺寸缩小了。您所描述的内容听起来与我遇到的问题相同，上述修复对此有效，但您的问题不同。我正在添加一个单独的答案来解决您的问题，因为我认为这个答案可能对其他人有所帮助。