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