admin管理员组文章数量:1565358
h5页面移动端禁止缩放、web页面禁止浏览器缩放
移动端优先,可禁止用户缩放和双击放大;
在App.vue中的script内的方法里加入以下代码:
window.onload = function() {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault()
}
})
document.addEventListener('gesturestart', function(event) {
event.preventDefault()
})
}
pc端移动端都在index.html里<head>标签里写上下面代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
pc端( 或 ios移动端 )在index.html里<head>标签里写上下面代码:
<script>
document.addEventListener('mousewheel', function (e) {
e = e || window.event;
if ((e.wheelDelta && event.ctrlKey) || e.detail) {
event.preventDefault();
}
}, {
capture: false,
passive: false
});
</script>
到这里为止绝大部分机型设备都能被禁止掉双指/双击缩放,但开发过程中页面上有输入框,这个时候就会发现明明禁止掉的缩放,页面怎么又放大了?
这是因为给输入框设置比页面的 font-size 更大的值, 比如页面设置font-size: 14px,输入框需设置font-size: 14.5px以上则聚焦时页面不会放大。
综合以上页面缩放问题完美解决!
版权声明:本文标题:VUE 页面禁止缩放(华为平板浏览器可能失效) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1726624820a1078649.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论