时间戳

首页 > 解决方案 > 导航栏仅在移动直播服务器中超出视口

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

问题描述

我在我的网页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文件并且我没有弄乱navbarclass 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我认为是常规引导程序的类。

标签： htmlcssreact-bootstrapnav

解决方案

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

初始比例=1，最小比例=1

推荐阅读