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

开发者 2024-9-11 19:52:32 49 0 来自 中国
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的范围之内。
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-23 19:41, Processed in 0.153131 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表