H5兼容 页面在华为部分曲面屏手机上会超出宽度?
//异常样式
//苹果等手机上正常样式
请问什么原因导致的?怎么解决?
<body>
<div class="plan">
<div class="plan_title"></div>
</div>
</body>
body {
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100vw;
display: flex;
justify-content: center;
}
.plan {
margin-left: 5px;
width: 69.4rem;
margin-top: 10.3rem;
}
.plan_title {
width: 62.1rem;
height: 10.4rem;
background-image: url(//xxxx/asset/img_planb/planb_title.png);
background-repeat: no-repeat;
background-size: 100%;
margin: 0 auto 6.3rem auto;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
特殊兼容一下吧,如果是华为,改变一下容器宽度。
const isHuawei = navigator.userAgent.toLowerCase().match(/huawei/i) == "huawei";