在某些手机上，导航栏未覆盖页面的整个宽度

Question

我目前正在使我的网站响应并确保它在 mobile/tablets 上看起来不错。在执行此操作时，我发现我的固定导航栏的宽度设置为 100vw，如果我双指缩放，它不会覆盖页面的宽度（一位朋友还告诉我导航栏没有覆盖他的宽度phone 屏幕甚至在他缩小之前）。

缩小之前：

缩小后

我试过在网上寻找解决方案，但一无所获。我也尝试将导航栏从 100vw 更改为 100%，但问题仍然存在。我该如何解决这个问题？

Answer 1

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

此外，您的图像大小存在问题，这就是为什么您实际上能够首先缩小的原因。

因此请更正您的图片尺寸或将您的导航栏宽度更改为 100%。两者都应该有效。

最好更正图像尺寸。

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

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