导航栏不覆盖某些手机上的整个页面宽度[关闭]

Question

我目前正在使我的网站具有响应性，并确保它在移动设备/平板电脑上看起来不错。这样做时，我发现我的固定导航栏，宽度设置为 100vw，如果我捏拉缩小，则不会覆盖页面的宽度（一位朋友还告诉我导航栏没有覆盖他的宽度甚至在他缩小之前的手机屏幕）。

在缩小之前：

缩小后

我曾尝试在网上寻找解决方案，但空手而归。我还尝试将导航栏从 100vw 更改为 100%，但问题仍然存在。我该如何解决这个问题？

Answer 1

您的导航栏宽度设置为 100vw，这意味着 100% 的视口被覆盖，这正是您的情况，因为导航栏在将其捏出之前会覆盖整个屏幕。 尝试将导航栏宽度设置为 100% 而不是 100vw。

此外，您的图像大小存在问题，这就是为什么您实际上能够在第一时间张开。

所以更正您的图像尺寸或将您的导航栏宽度更改为 100%。两者都应该工作。

最好校正图像尺寸。

如果您使用的是 Bootstrap 之类的东西，则不需要首先添加宽度。

如果需要进一步说明，请分享代码。