我无法让移动视口正常运行和缩放

Question

我需要有人在我的页面上查看源代码，请告诉我为什么移动版本总是打开很大，只需要手动缩小。我需要它以正确的尺寸打开并保持该尺寸。 请在以下链接中查看来源：

http://directsellers.org/NeverTakeNo4Answer/LetsGo.html

注意：我觉得我已经尝试了几乎所有的元视口版本，但没有运气。 我觉得问题可能更深，但我无法识别它。 请帮助我弄清楚这一点，这样我就可以继续我的生活。

Answer 1

看起来您的 #Container 样式没有在 400px 媒体断点上使用百分比。字体大小也是1.5em

Answer 2

无论视口是什么，您的#Container包装div 的设置宽度都是 1000px。另外，我没有看到正在使用任何媒体查询？

尝试添加媒体查询，使其宽度随着视口的缩小而减小：

@media (max-width: 991px) {
    #Container {
        width: 720px;
    }
}

为较小的视口添加另一个，也许使#Container跨越 <= 767px 的视口的整个宽度：

@media (max-width: 767px) {
    #Container {
        width: 100%;
    }
}

您可以根据需要添加和定制任意数量...这是一个有用的指南：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries