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

admin4年前前端技术2022

要实现Android和IOS浏览器禁止页面缩放,通用的设置方式是给HTML页面设置meta标签来实现,具体添加标签内容如下:

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

width           // 设置 viewport 的宽度,正整数/字符串 device-width

height          // 设置 viewport 的高度,正整数/字符串 device-height

initial-scale      // 设置设备宽度与 viewport大小之间的缩放比例,0.0-10.0之间的正数

maximum-scale     // 设置最大缩放系数,0.0-10.0之间的正数

minimum-scale     // 设置最小缩放系数,0.0-10.0之间的正数

user-scalable     // 如果设置为 no 用户将不能缩放网页,默认为 yes,yes / no



注意:iOS10以后版本不接受meta标签,可以通过js监听手势控制来实现禁止页面缩放:

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

 


__EOF_


相关文章

H5页面移动端双击屏幕禁止页面放大

在meta标签中加入user-scalable=no属性...

JQuery 两种方法解决刚创建的元素遍历不到的问题

刚创建的元素,使用jQuery的each方法来遍历,有时候会不起作用。原因不用多说,经常使用javascript的人应该都会知道,解决方案大致有2种:1、刚创建完元素的时候,就立刻使用each方法$(...

Navigate down the menu through jquery development

The core knowledge is to use jquery's hover method to achieve, The animation effe...

webpack全局安装了,使用命令时却提示安装脚手架

全局安装了webpack ,使用webpack的时候,却有如下的提示One CLI for webpack must be installe...

ubbedit文件精简,删除所有用不到的文件,设置新的路径调用

ubbedit文件精简,删除所有用不到的文件,设置新的路径调用

移动editor_api.js文件从ex目录到ubbedit目录,设置 baseURL = '/ubbedit/_src/';设置Gruntfile.js文件 js...

whatsapp浮动按钮

whatsapp浮动按钮

whatsapp浮动按钮whatsapp.zip...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。