ios禁止网页放大缩小

移动设备升级到iOS10了,发现了自带的Safari浏览器不再识别meta viewport了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~

在iOS10之前都是通过

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

来强制不让手机浏览器缩放的,但是升级到iOS10后Safari不再识别这个meta标签。所以得用js来hack一下:
禁用双指缩放:

document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

禁用手指双击缩放:

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

如果在iOS10的Safari中设置了viewport,其实双击放大也是不生效的,所以个人觉得在iOS10上比较好的解决方案是先设置viewport,然后再用js禁用双指缩放即可,无需再设置禁用双击缩放。

同时给出这个解决方案的作者还提出了一个有情提示,如果任何一个子元素的touch事件设置了stopPropagation阻止事件冒泡的话,可能还是会失效,而且在iOS10中你的输入框字体最好不要小于16px,否则iOS在输入框获得焦点时可能还是会强制放大。

原文地址:http://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari

时间: 2024-08-02 02:08:24

ios禁止网页放大缩小的相关文章

html5-文字根据页面放大缩小,怎么逐渐的放大缩小,关键是“逐渐”二字

问题描述 文字根据页面放大缩小,怎么逐渐的放大缩小,关键是"逐渐"二字 做网站,我是用百分比做的,出现一个问题,如果浏览器页面大小改变, 文字怎么跟着也逐渐放大和缩小,必须要 文字逐渐的 放大和缩小?关键是"逐渐"二字. 解决方案 jQuery animate()方法,创建自定义动画 <!DOCTYPE html> $(document).ready(function(){ $(""button"").click(

移动端js兼容代码禁止放大缩小问题

问题描述 移动端js兼容代码禁止放大缩小问题 <!--移动端版本兼容 --> <script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; var ua = navigator.userAgent; if (/Android (d+.d+)/.test(ua)) { var version = p

css-问一下网页端CSS样式在手机端显示的时候,放大缩小功能失效呢,这个问题有人遇到过吗,

问题描述 问一下网页端CSS样式在手机端显示的时候,放大缩小功能失效呢,这个问题有人遇到过吗, 问一下网页端CSS样式在手机端显示的时候,放大缩小功能失效呢,这个问题有人遇到过吗 .top { height:43px; } <div class="top"> 代码省略 </div> <div class="content"> 代码省略 </div> 解决方案 在手机端页面的头部 加上 width - viewport的

iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果_IOS

之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

一个方法搞定iOS下拉放大及上推缩小_IOS

下面这种效果在ios应用中很常见: 实现思路: 1、创建头部的视图和tableview,需要注意的是tableview要设置contentInset,contentInsent 的顶部要和头部视图的背景图的高度一样,否则会有空隙(或是有遮挡). myTableView.contentInset = UIEdgeInsetsMake(headRect.size.height-navHeight-navHeight, 0, 0, 0); 2、对头部视图的背景图片的尺寸进行处理,当然,你也可以直接找一

把百度地图放在自己所写的网页里,可放大缩小

原文:把百度地图放在自己所写的网页里,可放大缩小 1.首先进入网址,http://api.map.baidu.com/lbsapi/creatmap/index.html (如果有错的话,可采取如下方法:进入百度地图,右上角有一个地图API,,点击进去之后在主页面会有一个地图快速生成器,然后就可以创建属于自己的地图了) 2.在该网页中科搜素自己想要的地方,如"北京,天安门" 3.可以设置地图的宽和高. 4,得到所需地图后,定位某一个位置,如天安门,当进入该网页后,首先显示在眼前的就是&

Android实现手势滑动多点触摸放大缩小图片效果_Android

网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考 实现原理:自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程: 首先ImageView是继承自View的子类.onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法.setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新UI

c++-如何在windows系统下使用C++模拟触控板上放大缩小的功能

问题描述 如何在windows系统下使用C++模拟触控板上放大缩小的功能 比如在某个网页界面上,双指聚拢,则页面缩小:双指分离则页面放大. 这个有什么对应的windows消息吗? 如果我已经知道了某个窗口的HWND,能否通过简单的发送消息的形式,达到同样的效果? 或者是能模拟出触控板的行为也可. 解决方案 你可以用spy++看下.一些触摸板式是转换成滚轮消息的. 解决方案二: 这个你查一下windows的消息就知道了,你在触摸屏上执行一个动作,系统是会发送一个消息给你的应用程序的,你只要捕捉到这

Android多点触控实现对图片放大缩小平移,惯性滑动等功能_Android

文章将在原有基础之上做了一些扩展功能: 1.图片的惯性滑动 2.图片缩放小于正常比例时,松手会自动回弹成正常比例 3.图片缩放大于最大比例时,松手会自动回弹成最大比例 实现图片的缩放,平移,双击缩放等基本功能的代码如下,每一行代码我都做了详细的注释 public class ZoomImageView extends ImageView implements ScaleGestureDetector.OnScaleGestureListener, View.OnTouchListener , V