移动端H5页面禁止缩放了,在浏览器上仍然可以缩放

发表于 : 2018-04-23   · CC BY-NC-SA 4.0 ·   3705 人浏览

在手机中,不管是浏览器还是微信:都属于APP以webview加载打开H5页面

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

这句话,虽然是禁止缩放
但是在手机平台上的浏览器中页面仍然能够缩放
APP中都强制双指缩放了
大概意思就是webview被重新设置了可以支持缩放
所以,在网页加载时你配置的 meta 是无效的
需要在webview被重新设置之后,你在设置 meta 才行.
所以我在网页最底部这样写(引入了JQ).

$('head').append('<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />');

建议加个延迟,自己调整.

缩放 双指缩放 H5禁止缩放 webview