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端的兼容性问题
1605 0
|
移动开发 编解码 JavaScript
|
Linux 编译器 数据处理
深入了解Linux命令ld.gold:快速链接器的奥秘
`ld.gold`是GNU的快速链接器,设计用于加速大型项目的链接,尤其擅长并行处理和增量链接。它与标准的`ld`高度兼容,可通过`-fuse-ld=gold`选项启用。例如,`gcc -o my_program file1.c file2.c file3.c -Wl,--ld-as-needed -fuse-ld=gold`命令使用`ld.gold`链接多个源文件。最佳实践包括确保环境支持、利用多线程和启用增量链接。
|
移动开发 JavaScript 小程序
uniapp中组件库的Checkbox 复选框 的丰富使用方法
uniapp中组件库的Checkbox 复选框 的丰富使用方法
1907 0
|
移动开发 JavaScript HTML5
Vue3视频播放(Video)
这篇文章介绍了如何在Vue 3框架中创建一个视频播放组件(Video),支持自定义视频源、封面、自动播放等多种播放选项和样式设置。
3505 1
Vue3视频播放(Video)
|
编解码 前端开发 JavaScript
前端:Rem 及其转换原理
Rem是一种用于前端开发的相对字体大小单位,它基于根元素的字体尺寸来定义文本大小,有助于实现响应式布局和可维护性。Rem的转换原理是通过相对于HTML根元素的字体大小来设置子元素的字体大小,从而实现统一的比例调整,提高页面的适应性和灵活性。此方法简化了跨浏览器和设备的布局调整,增强了用户体验。
|
数据安全/隐私保护
vuex数据持久化、加密(vuex-persistedstate、secure-ls)
本文介绍了如何在Vuex中使用`vuex-persistedstate`和`secure-ls`库进行数据的持久化和加密,确保在Vite打包上线后,Vuex中的数据安全。
600 1
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
5372 0
expectedcss(css-rcurlyexpected),使用:变红怎么整,给他改成less就可以了
expectedcss(css-rcurlyexpected),使用:变红怎么整,给他改成less就可以了

热门文章

最新文章