网页不能缩放?你可能会找meta标签的viewport, 你的代码可能是这样的:

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

你惊奇的发现了user-scalable大喜,把其设为yes或1,然而并没有卵用,如果没猜错的话这些貌似“不重要”的代码是从别处拷贝过来的,而不是自己敲出来的。

对于上述viewport标签在不同类型的手机上(安卓、ios)缩放支持情况不同,在相同的手机上不同浏览器下也不能全部支持缩放,相对来说安卓上的浏览器对缩放支持较好,苹果上就不行了,自带的safari可以,但QQ浏览器和UC都不行,这个坑并不仅仅是你的代码造成的,是由手机、系统、浏览器共同混合而成的。

viewport中各个属性的意义如下:

width:可设定为具体数值或device-width(自适应宽度)
height:可设定为具体数值或device-height(自适应高度)
initial-scale:第一次进去页面的初始比例
minimum-scale:缩放最小比例
maximum-scale:放大最大比例
user-scalable:是否允许缩放 1、0或yes、no

上述meta标签再有些手机浏览器下不能缩放的原因可能是:minimum-scalemaximum-scale同时设为1。其效果就是不能缩放。和user-scalable=nouser-scalable=yes无关。然而有些浏览器是不严格的,这种条件下依然可以缩放。

所以我最后把viewport标签改成:

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

上述标签在目前我手里的两部手机上的不同浏览器下都可以缩放,仅供参考,欢迎指正、补充。