飘在云端

啊!那蓝真天,白真云!

· 前端 · · 287次浏览

vue 移动端禁止横向滚动条及页面缩放

使用的是 ElementUI + Vue ,在 index.html 的 head 标签加入

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">

解决了一半问题,但在初次点击 el-select-dropdown 下拉菜单时,聚焦到下拉菜单,页面全部可以自由缩放,并且页面还会产生一个横向滚动条,随意点击页面的其他空白部分,才恢复正常。

解决办法,对 body 和 html 标签进行二次处理:

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;    
height: 100%;   
position: absolute; 
left: 0;top: 0; 
overflow: hidden;   
overflow-y: auto;
&::-webkit-scrollbar{width:0px}
}

yarn重新build之后,验证测试通过。
同时发现Google Chrome v96的手机视图预览模式下与部分移动端设备实际表现不符。在 仅添加 head 情况下,谷歌浏览器开发者模式手机预览,测试通过,实际移动端设备,iOS 15.3,自带的 Safari 实际表现与 Chrome 调试模式下不符。

https://blog.csdn.net/qq_44832096/article/details/119738049
https://www.jianshu.com/p/6c7005c2bb9a
https://www.jb51.net/article/191419.htm