导航栏仅在移动直播服务器中超出视口

问题描述

我在我的网页 https://vinoreo.mx 中遇到了这种奇怪的行为。

导航栏超出移动直播服务器的视口。本地主机工作正常。

它仅发生在 "/" 路线中，其他路线正确显示视口。

在加载所有 DOM 元素之前，视口显示正确，但是一旦元素更新（前端反应），就会出现问题。

SPA 使用此 Meta 标签：

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

使用 iPhone 6/7/8 Plus 作为参考的实时移动视图

使用相同 iPhone 6/7/8 Plus 作为参考的本地主机视图

如您所见，footer navbar 消失了，whatsapp 和购物车按钮也已修复，并且来自主顶部 navbar。

我已经查看了我的 style.scss 文件并且我没有弄乱 navbar 类 widths。

.navbar {
    padding: 0.5rem 10%;
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 2% 2%;
    }
}
.nav-link {
    padding: 0px;
}

.navbar-text {
    padding-bottom: 0;
}

我正在使用 React-bootstrap 类，我认为这些类是常规引导类。

解决方法

我花了几天时间尝试移动 css 并最终通过将其添加到 meta content 标签解决了这个问题：

初始尺度=1，最小尺度=1

html nav nav react-bootstrap