css - 如何锁定网站以适应视口(viewport)内而无法在移动设备上水平滚动

Question

我从一些用户(“大多数情况下是 Android 用户”)那里收到报告，该网站在他们的手机上打开时显示为白屏。

经过一些故障排除后，我发现如果你缩小并四处滚动，你会找到实际的网站。

当您打开网站时，视口(viewport)会显示一个大的白色屏幕，而实际的网站就在其中。

我将其添加到 header.php <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1">而且它没有得到修复。

知道为什么以及如何将网站内容锁定到视口(viewport)干部吗？

用户发送的截图:when they first open the website

用户发送的截图:After they scroll right and zoom out a bit

Answer 1

编辑:

首先尝试将您的视口(viewport)标签更改为:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您可以尝试添加以下 CSS:

body {
  width: 100vw;
  overflow-x: hidden;
}

您还可以尝试通过使用以下内容调整您的视口(viewport)标签来禁用缩放:

maximum-scale=1.0, user-scalable=no

您可能还想查看 CSS touch-action 属性: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action