IOS 禁止缩放页面的实现方法

IOS 禁止缩放页面的实现方法

在ios10前我们能通过设置meta来禁止用户缩放页面：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

在ios10系统中meta设置失效了：

为了提高Safari中网站的辅助功能，即使网站在视口中设置了user-scalable = no，用户也可以手动缩放。

解决方法：监听事件来阻止

window.onload=function () {
    document.addEventListener('touchstart',function (event) {
      if(event.touches.length>1){
        event.preventDefault();
      }
    })
    var lastTouchEnd=0;
    document.addEventListener('touchend',function (event) {
      var now=(new Date()).getTime();
      if(now-lastTouchEnd<=300){
        event.preventDefault();
      }
      lastTouchEnd=now;
    },false)
  }

以上就是对IOS 禁止用户缩放页面的实现方法，如有疑问，请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • iOS之Cocoapods安装教程(全面解析)

    网上关于cocoapods的教程很多,关于它的优点我不赘述:但是我根据多次安装的经验,把我遇到的问题写一下,希望对新手有所帮助: 1. 设置输入源(由于默认的gem资源是国外的,由于历史原因,访问比较慢,所以需要改为国内的) 删除原来的: $ sudo gem sources --remove https://rubygems.org/ 添加新的 $ sudo gem sources -a https://ruby.taobao.org/ 出现如下提示,即为设置成功 $ sudo gem sou

  • iOS tableView实现单选和多选的实例代码

    iOS tableView实现单选和多选的实例代码

    今天在项目中遇到了tableView的单选需求,现在总结一下,用一个简单的demo实现了简单的单选和多选两个功能.先看下效果图: 1:首先实现下单选 1:使用一个变量记录选中的行 @property (assign, nonatomic) NSIndexPath *selIndex; //单选选中的行 2:设置tableView数据,共2组,每组10行, - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { ret

  • iOS如何实现强制转屏、强制横屏和强制竖屏的实例代码

    本文介绍了iOS如何实现强制转屏.强制横屏和强制竖屏的实例代码,分享给大家 今天项目中遇到正在看视频的时候账号被挤,如果当时是横屏的情况下,需要强制竖屏.真头疼,网上找了好多方法,终于解决啦.O(∩_∩)O~ 强制横屏: [self interfaceOrientation:UIInterfaceOrientationLandscapeRight]; 强制竖屏: [self interfaceOrientation:UIInterfaceOrientationPortrait]; 强制转屏 -

  • iOS 实现类似QQ分组样式的两种方式

    iOS 实现类似QQ分组样式的两种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

  • iOS模仿微信长按识别二维码的多种方式

    参考:https://github.com/nglszs/BCQRcode 方式一: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end ************** #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDid

  • iOS实现手机获取验证码倒计时效果

    iOS实现手机获取验证码倒计时效果

    手机获取验证码的倒计时效果,实现很简单,附倒计时效果完整代码 之前做项目使用的是NSTimer做的倒计时效果,效果不太好.今天学习了下用GCD做,效果还是不错的. 关键代码如下:(完整代码) //创建一个全局并非队列 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); //创建一个定时器 _timer = dispatch_source_create(DISPATCH_SO

  • iOS粒子路径移动效果 iOS实现QQ拖动效果

    iOS粒子路径移动效果 iOS实现QQ拖动效果

    粒子效果,QQ拖动效果,实现很简单,具体代码如下 一.图示 二.分析 我们要实现的如果如上面的图示,那么我们可以按照下面的步骤操作: 第一步:我们的红点其实是一个UIButton.创建一个BageValueView继承自UIButton 第二步:初始化的时候,初始化控件,设置圆角,修改背景.文字颜色 第三步:添加手势.在手势的处理中我们,我们需要让当前控件随着手指移动而移动. 第四步:控件一开始创建的时候,其实有两个圆,一个就是我们能够拖动的大圆,另外一个就是原始位置上会改变大小的圆.这一步骤中

  • IOS 禁止缩放页面的实现方法

    IOS 禁止缩放页面的实现方法 在ios10前我们能通过设置meta来禁止用户缩放页面: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 在ios10系统中meta设置失效了: 为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no,用户也可以

  • iOS禁止所有输入法表情的方法

    本文实例为大家分享了iOS禁止所有输入法表情的具体代码,供大家参考,具体内容如下 - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text { //禁止所有输入法的表情 if ([self isContainsTwoEmoji:text]) { return NO; } return YES; } //判断是否是表情字符 - (BO

  • js实现整体缩放页面适配移动端

    大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可 切记: 1.该 JS 应在 head 中尽可能早的引入,减少重绘. 2.定宽(视窗缩放): 对应 meta 标签写法 – 750 是效果图内容区域的宽度,一般为 640 或 750 html头部代码: <meta charset="UTF-8"> <meta name="viewport" content="

  • React Native 加载H5页面的实现方法

    目录 一.基本使用 1.1 RN向H5发送数据 1.2 H5向RN传递数据 1.3 双向传值 二.属性和方法 2.1 属性 2.2 方法 三.使用示例 3.1 加载外源网页信息 3.2 登陆场景 3.3 功能模块嵌入到 RN 中 3.4 完整示例 一.基本使用 作为目前流行的移动跨平台开发技术,React Native 提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架.使用React Native开发时,经常会遇到加载H5网页的需求,此时需要用到react-native-w

  • IOS App 无代码入侵的方法hook详细介绍

    iOS App 无代码入侵的方法hook 继续Objective-C runtime的研究 最近公司项目在做用户行为分析 于是App端在某些页面切换,交互操作的时候需要给统计系统发送一条消息 在几十个Controller 的项目里,一个一个地加代码那完全是不可能的,维护起来也是吃力 但这里需要处理的是 Controller, 可以有以下方式实现上述需求 1. 利用Objective-C 中的对象继承 继承 在面向对象开发中是非常常用的,像我们现在做的项目工程中都会有一个BaseViewContr

  • iOS 控制器自定义动画跳转方法(模态跳转)

    iOS 控制器自定义动画跳转方法(模态跳转)

    参考资料: Apple 开发文档 Customizing the Transition Animations WWDC 2013 Custom Transitions Using View Controllers 图例: 跳转的动画有很多,全部可以自定义 创建自定义跳转必须遵循的三个步骤: 1.创建一个类,并实现了 UIViewControllerAnimatedTransitioning 协议 2.创建一个类作为 UIViewControllerTransitioningDelegate 过渡

  • vue h5移动端禁止缩放代码

    安卓 在index.html里面写 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ios 在APP.vue里面写 <script> window.onload = function() { document.addEventListener('touchstart', func

  • Springboot 使用内置tomcat禁止不安全HTTP的方法

    Springboot 内置tomcat禁止不安全HTTP方法 1.在tomcat的web.xml中可以配置如下内容 让tomcat禁止不安全的HTTP方法 <security-constraint> <web-resource-collection> <url-pattern>/*</url-pattern> <http-method>PUT</http-method> <http-method>DELETE</ht

  • iOS微信H5页面橡皮回弹效果的踩坑记录

    业务需求 近期开发的项目有一部分是与微信公众号相关的H5页面,在Android端微信上页面效果展示无异常,但是在 iOS端 微信多多少少会出现一些意想不到的bug.此次主要针对移动端H5页面在iOS端产生的 橡皮回弹(橡皮筋效果)问题做一下相关记录,希望对遇到类似问题的同学有所帮助.

  • Vue出现弹出层时禁止底部页面跟随滑动

    背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用.下面是几种可以解决问题的方式,仅供参考: 1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即

随机推荐