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的范围之内。

相关文章
|
3月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
35 0
|
5月前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
|
5月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
215 3
|
5月前
win32编程 -- 滚轮实现放大或缩小图片
win32编程 -- 滚轮实现放大或缩小图片
48 0
|
5月前
|
编解码 定位技术 Windows
电脑多个不同分辨率屏幕鼠标移动时出现偏移、错位情况的解决方法
电脑多个不同分辨率屏幕鼠标移动时出现偏移、错位情况的解决方法
208 1
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
133 0
|
编解码 前端开发
前端设置页面字体尺寸跟随屏幕大小而进行变化
前端设置页面字体尺寸跟随屏幕大小而进行变化
600 0
前端设置页面字体尺寸跟随屏幕大小而进行变化
|
编解码
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
140 0
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片