使用 iPhone 时网站上出现水平滚动答案

【问题标题】：Horizontal scroll appears on website when using iPhone使用 iPhone 时网站上出现水平滚动
【发布时间】：2017-09-05 19:12:23
【问题描述】：

我的网站http://dsmedvednikov2.zzz.com.ua/ 的移动版本有问题。使用 iPhone 或 iPad 时，无论使用 Safari 还是 Google Chrome 浏览器，都会出现水平滚动。在 Android 设备上一切正常。有人可以给我一个建议吗？

【问题讨论】：

您正在使用可能大于屏幕宽度的固定宽度。你能张贴可以工作和不工作的设备的尺寸吗？
请向我们提供网站的代码。但到目前为止，我可以告诉你的是，一个元素正在扩大网页的宽度，从而超出了视口的宽度。要查看是什么元素在执行此操作，请给所有元素一个边框，从那里您可以看到哪个元素正在占用该空间。
在我的桌面和所有 Android 设备上的 chrome 开发者模拟器中一切正常，所以我认为问题不在于某些元素的宽度，也许是某种 iOS 问题。

【解决方案1】：

您可以通过添加此元标记来限制用户停止缩放/捏合您的网站：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

或者如果它是一个非常微小的 x-scroll 效果，您可以使用以下小技巧：

body    {
    overflow: hidden;
    overflow-y: auto;
    }

它将停止任何水平滚动效果。

【讨论】：

这是解决此类问题的错误方法。最好首先确定是什么元素导致网页扩展超出视口宽度，然后对其进行修改，使其在移动设备上正常运行。您正在提供一种快速的解决方法，但这些方法会带来更大的问题。
但他说该网站在 android 设备上运行良好，所以某些元素的宽度可能没有问题。这就是为什么我建议使用元标记解决方案。每个网站都放置元标记 (width=device-宽度）更好的响应能力。
感谢您的回答，但这个解决方案仍然无效
还有许多其他因素可能会导致元素在一个浏览器而不是另一个浏览器上不正确呈现。一个示例可能是错误地使用了供应商特定的 CSS 前缀，从而导致意外行为。第一步是确定导致问题的是什么，然后再尝试采用任意解决方案。
只是为了最后一次检查你放了 *{box-sizing:border-box;} 吗？有时在开发开发人员时忘记将这个小属性放在开头导致错误

【解决方案2】：

似乎页面 css 正在弄得一团糟。即使在我的 Mac 上的 safari 中也会遇到同样的问题。请确保您的 CSS。

据我所知，我浏览了您页面的 CSS 属性

这是导致问题的原因。如果您使用 % 而不是 'px' 会更好地解决您的问题。

谢谢！继续编码。

【讨论】：

【解决方案3】：

如果您使用固定宽度，则可能会导致问题。使用**

宽度：100%

【讨论】：