尝试阻止在Android上Chrome浏览器中的某个页面进行缩放,并且它不想表现。我正在使用下面的代码,它适用于Android浏览器和iOS上的Safari。有什么想法吗?
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' name='viewport' />
<meta name="viewport" content="width=device-width" />
答案 0 :(得分:15)
尝试将minimum-scale=1
添加到您的viewport
元标记中 - 如果这没有帮助,Chrome for Android可能不支持禁用缩放(HTC的专有浏览器故意不允许您例如,禁用缩放)
更新:我刚检查过,看起来Chrome 支持支持禁用缩放,但您的代码中有两个视口标记?第二个可能压倒第一个。删除第二个。
有关详细信息,请参阅此mobile browser support for disabling zoom列表,以及在多个浏览器中禁用缩放的良好建议。
答案 1 :(得分:10)
我正在使用腰带和括号方法,根据developer.android.com的Targeting Screens from Web Apps
配置所有可用的视口设置以下语法显示了所有受支持的视口属性以及每个属性接受的常规值类型:
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value |
device-dpi | high-dpi | medium-dpi | low-dpi]
" />
已配置的无缩放元标记:
<meta name="viewport"
content="
height = device-height,
width = device-width,
initial-scale = 1.0,
minimum-scale = 1.0,
maximum-scale = 1.0,
user-scalable = no,
target-densitydpi = device-dpi
" />
作为一个班轮:
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />