导航栏仅在移动实时服务器中超出视口

Question

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

导航栏超出移动 - 实时服务器中的视口。 Localhost 工作正常。

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

在加载所有 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 class 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 classes，我认为这是常规的 bootstrap。

Answer 1

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

initial-scale=1,minimum-scale=1

导航栏仅在移动实时服务器中超出视口

Navbar exceeding viewport only in mobile live server

html

css

react-bootstrap

nav