如何解决导航栏仅在移动直播服务器中超出视口
我在我的网页 https://vinoreo.mx 中遇到了这种奇怪的行为。
导航栏超出移动直播服务器的视口。本地主机工作正常。
它仅发生在 "/"
路线中,其他路线正确显示视口。
在加载所有 DOM 元素之前,视口显示正确,但是一旦元素更新(前端反应),就会出现问题。
<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。