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端的兼容性问题
1406 0
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
3296 0
|
移动开发 编解码 JavaScript
|
11月前
|
存储 资源调度
在 Pinia 中如何实现状态持久化?
在 Pinia 中如何实现状态持久化?
2122 57
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
10136 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
1083 0
微信H5支付--微信JS-SDK支付--点金计划
|
资源调度 JavaScript 前端开发
在 Vue 3 中实现流畅的 Swiper 滑动效果
本文介绍了如何在 Vue 3 项目中集成 Swiper,涵盖了从安装、基本用法到丰富的配置选项。通过简单的示例,读者将学习如何创建响应式的图片轮播,利用 Swiper 的循环、自动播放和自定义分页功能,提升用户体验。无论是简单的幻灯片还是复杂的滑块效果,Swiper 都能轻松实现,帮助开发者快速构建出美观的滑动组件。
2930 0
|
JavaScript 前端开发 索引
Vue3 + Vite项目实战:常见问题与解决方案全解析
Vue3 + Vite项目实战:常见问题与解决方案全解析
1406 0
如何在 Vue3 项目配置全局方法
本文介绍了在Vue3项目中配置全局方法的几种方式,包括如何将Moment.js日期处理类库和字符串颜色值生成方法设置为全局可访问的属性。
938 0
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
7422 0