526互联

H5移动端禁止页面缩放(使用Android和IOS)

发布时间 2023-08-20 12:03:51作者: 涛啊声依旧
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

标签说明：

  1. width: 设置viewport的宽度，正整数/字符串 device-width
  2. height: 设置viewport的高度，正整数/字符串 device-height
  3. initial-scale: 设置设备宽度与viewport大小之间的缩放比例，0.0~10.0之间的正数
  4. maximum-scale: 设置最大缩放系数，0.0~10.0之间的正数
  5. minimum-scale: 设置最小缩放系数，0.0~10.0之间的正数
  6. user-scalable: 如果设置为no，用户将不能缩放网页，默认为yes，yes / no

注意：

IOS10以后版本不接受meta标签，可以通过js监听手势控制来实现禁止页面缩放：

document.addEventListener('gesturestart', function (event) {
    event.preventDefault()
})