JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题

简介: JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
  • 移动端 web 缩放有两种:双击缩放双指手势缩放
  • iOS 10 之前,iOSAndroid 都可以通过一行 meta 标签来禁止页面缩放:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • iOS 10 开始,meta 设置在 Safari 内无效了,在 iOS 的其他浏览器上也会相应出现无法禁止缩放的情况出现。
  • 解决办法,在需要禁止缩放的页面导入下面 JS 配置:
window.onload = function() {
  // 阻止双击放大
  var lastTouchEnd = 0;
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) { event.preventDefault(); }
  });
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) { event.preventDefault(); }
    lastTouchEnd = now;
  }, false);
  // 阻止双指放大
  document.addEventListener('gesturestart', function(event) {
    event.preventDefault();
  });
}


相关文章
|
3天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
4天前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
|
1天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
5 0
|
1天前
|
编解码 JavaScript 容器
js 获取浏览器相关的宽高尺寸
js 获取浏览器相关的宽高尺寸
6 0
|
4天前
|
Web App开发 JavaScript 前端开发
03 JavaScript学习:浏览器中执行 JavaScript
03 JavaScript学习:浏览器中执行 JavaScript
|
4天前
|
JavaScript
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
9 0
|
5天前
|
JavaScript 前端开发 API
JS案例:在浏览器实现自定义菜单
JS案例:在浏览器实现自定义菜单
|
2月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
150 1
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
68 0
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理