h5页面在移动端实现禁止缩放、双击放大和双指放大

简介: h5页面在移动端实现禁止缩放、双击放大和双指放大

h5页面如何在移动端禁止缩放、双击放大和双指放大呢?
  h5的页面在手机浏览器里面访问时,有时候不小心点了,页面就变大了,那需要如何做,才能禁止缩放、双击放大和双指放大呢?实现该效果的代码如下(需要在js里面添加方法):

// 禁用缩放

function addMeta() {
   
    $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
}
setTimeout(addMeta, 3000);

// 禁用双指放大

document.documentElement.addEventListener('touchstart', function (event) {
   
    if (event.touches.length > 1) {
   
        event.preventDefault();
    }
}, {
   
    passive: false
});

// 禁用双击放大

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
   
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
   
        event.preventDefault();
    }
    lastTouchEnd = now;
}, {
   
    passive: false
});
initial-scale

  初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale
  最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

user-scalable
  用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。

注意:所有的缩放值都必须在0.01–10的范围之内。

相关文章
|
移动开发 前端开发 iOS开发
记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端H5的复制功能在ios端的兼容性问题
1570 0
|
11月前
|
前端开发
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
587 108
|
移动开发 编解码 JavaScript
|
移动开发 JavaScript 小程序
uniapp中组件库的Checkbox 复选框 的丰富使用方法
uniapp中组件库的Checkbox 复选框 的丰富使用方法
1856 0
|
JavaScript 前端开发 索引
Vue3 + Vite项目实战:常见问题与解决方案全解析
Vue3 + Vite项目实战:常见问题与解决方案全解析
1709 0
如何在 Vue3 项目配置全局方法
本文介绍了在Vue3项目中配置全局方法的几种方式,包括如何将Moment.js日期处理类库和字符串颜色值生成方法设置为全局可访问的属性。
1203 0
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
5294 0
expectedcss(css-rcurlyexpected),使用:变红怎么整,给他改成less就可以了
expectedcss(css-rcurlyexpected),使用:变红怎么整,给他改成less就可以了
大陆、港澳台身份证、护照、军官证的正则表达式
大陆、港澳台身份证、护照、军官证的正则表达式
2795 0

热门文章

最新文章