移动端禁止浏览器强制缩放问题

Web 开发 > HTML5
收藏 回复
[问题点数：50分]
更多帖子
私信 空间 博客
ChiangShenHung
等级
本版专家分：0
结帖率 0%
<script>
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)  

}
</script>

但是这个好像不能判断手指不同时放在屏幕上，先后放在屏幕上同样可以做到缩放，是否可以通过监听屏幕手指数量来实现进一步的禁止缩放行为？
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：161886
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
只看TA 引用 举报 #1得分 0
私信 空间 博客
缘飞梦
等级
本版专家分：0
勋章
Blank
签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">在head标签中添加这一行代码，就可以实现移动端禁止浏览器缩放
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
版主
业余草
等级
本版专家分：21322
勋章
Blank
GitHub 绑定GitHub第三方账户获取
Blank
优秀版主 2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主
Blank
蓝花 2015年7月 Web 开发大版内专家分月排行榜第三
只看TA 引用 举报 #3得分 0
私信 空间 博客
圆溜溜大西瓜
等级
本版专家分：0
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
daoke_li
等级
本版专家分：5
勋章
Blank
脉脉勋章 绑定脉脉第三方账户获得
Blank
GitHub 绑定GitHub第三方账户获取
//禁止双指放大
   document.documentElement.addEventListener('touchstart', function (event) {
       if (event.touches.length > 1) {
           event.preventDefault();
       }
   }, {passive:false});
   // 禁止双击放大
   let lastTouchEnd = 0;
   document.documentElement.addEventListener('touchend', function (event) {
       var now = Date.now();
       if (now - lastTouchEnd <= 300) {
           event.preventDefault();
       }
       lastTouchEnd = now;
   }, {passive:false});

注意 {passive:false}
只看TA 引用 举报 #5得分 0
收起
收藏 回复
ChiangShenHung

等级：

关注 私信 TA的帖子
移动端阻止浏览器页面缩放（safari也好使）

移动端阻止浏览器页面缩放（safari也好使） window.onload = function() { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function(event) { if (event.touches.length > ...

移动端H5页面如何屏蔽双击缩放的功能？

将页面的DOCTYPE 改成下面的 &lt;!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"...width=device-width...

完美解决ios10及以上Safari无法禁止缩放的问题

完美解决 ios10 及以上 Safari 无法禁止缩放的问题 转载自掘金-互联网学徒 移动端web缩放有两种： 双击缩放 双指手势缩放 在 iOS 10之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放： &lt;...

前端-移动端h5常用属性

常用属性 Safari浏览器私有meta属性 ...移动端设备主要是iOS和Android两类，从用户量来看，Safari、UC、QQ是较多的3款浏览器了，因此整理了下移动web开发常用和3种浏览器的私有meta属性。 1.常用属性<meta

移动端浏览器 禁止放大 横屏 竖屏

禁止放大： &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /&gt; 强制横屏或者竖屏： &lt;meta name=&...

手机端设置缩放的解决方法和遇到的UC浏览器的坑

更换之后没有禁止成功。

移动端web开发笔记（一）

我本来一直在开发PC端的网页的，但是看到很多招聘都要求要有移动端开发的经验，所以开始学习一下！先搞清楚两个概念，移动端web开发，web app开发1、 移动web开发（pc端的页面用手机浏览器打开）这部分跟web前端开发...

移动端页面适配的rem换算

为什么要使用rem之前有些适配做法，是通过js动态计算viewport的缩放值（initial-...Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父

前端移动端适配总结

meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;但是，很多小伙伴只是感性的...

H5页面手机端禁止缩放的正确方式

H5页面禁止手机端缩放是个常见问题了 首先说meta方式 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 这个写法一抓一大把，因为...

Html5移动端布局及(rem布局)页面自适应布局详解（转）

有部分改动和我的总结笔记 常见的页面布局方式有， 静态布局 px布局 流式布局（Liquid Layout） 主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用） 自适应布局（Adaptive Layout） 即创建多个...

移动WEB开发之Safari、QQ、UC、360浏览器的私有Meta属性

Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。

浅谈前端移动端页面开发（布局篇）

本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧 内容有些长，这也是我第一次写博客，不足之处还请严厉指出 一. viewport ...

手机端如何阻止苹果浏览器输入框默认放大事件

今天遇到了苹果手机浏览器输入的时候，整个网页会放大，并且不会缩小，暂时还没有找到解决的办法，在继续找找 window.onload = function () { document.addEventListener('gesturestart', function (e) { ...

HTML5中几种meta标签的含义及使用（含移动端）

这是指定双核浏览器，默认以何种方式渲染页面。 //默认webkit内核 //默认IE兼容模式 //默认IE标准模式而 webkit|ie-comp|ie-stand 这种写法，跟font-family的规则类似，按照顺序排他的优先级，不支持则往下，...

iPhone 禁止 Safari 页面上下拖动反弹

iPhone 禁止 Safari 页面上下拖动反弹 解决方法：       手机端设置:        第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

html 横竖屏meta标签设置

<!-- uc强制竖屏 --> <!-- QQ强制竖屏 --> <!-- UC强制全屏 --> <!-- QQ强制全屏 -

ckplayer在手机用不了解决方法

ckplayer播放器的使用广泛度很高，很多个人视频站都选用了ckplayer，原因是其使用方法简单，档案完整，可以满足各种个性化设置。 不过可惜的是，官方并没有推出手机版的压缩包下载，ckplayer原版在手机端是不能使用...

关于css中touch-action属性 在移动端开发中遇到的问题

初次接触第一次接触touch-action这个属性 是在之前一个网约车公众号项目中遇到的 当时采用...当连续快速点击某个数字时，在ios端出现了强制缩放，百度一圈发现了这个属性,*{touch-action: manipulation}加上之后很管...

移动端常见的一些兼容性问题

1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会...

HTML_移动端缩放锁定

添加在Head标签中 &amp;amp;...-- 视图窗口，移动端特属的标签。 --&amp;amp;gt; &amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-

移动端UC /QQ 浏览器的部分私有Meta 属性

好在当前移动端浏览器都是wekit 内核一霸天下，单从这个角度看兼容工作相对于桌面的百花齐放舒服了不少。 数据就不罗列了，目前移动端国产浏览器的占有率上是UC 跟QQ 浏览器这对基佬，所以做前端肯定优先考虑这二货...

书写手机移动页面时的一些坑

今天总结一下在写手机移动端页面时的一些注意事项。在写手机移动端页面时，我们有时候会稀里糊涂的遇到一些坑。同时手机页面的一些展示和我们pc端页面的展示是有一些区别的。一、书写移动端时需注意的meta 标签1. 第...

移动端端如何阻止苹果浏览器输入框默认放大事件

&lt;meta content="yes" name="apple-mobile-web-app-capable"&gt; &...width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;...

移动端开发兼容性总结

每次h5开发，总会遇到一些...1)定位问题：ios 2)写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳 3)防止手机中网页放大和缩小: 4)设置Web应用是否以全屏模式运行:<meta name="apple-mobile-web-app-

移动平台前端开发总结（ios，Android）

首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 ● ...尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。...

meta标签的作用及整理

欢迎访文我的博客YangChen’s Blogmeta的标签的使用是我在前端学习中曾经困惑过一段时间的问题。一方面不是很了解meta标签的用途，另一方面是对于meta标签里的属性和值不是懂，也不知道从哪里冒出来的，所以这篇文章...

移动端h5页面根据屏幕适配的四种方案

文章转载自 百撕可乐... 方法一：引入淘宝开源的可伸缩布局方案 ... 淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等...

移动端 mate标签

initial-scale 初始的缩放比例minimum-scale 允许用户缩放到的最小比例 maximum-scale 允许用户缩放到的最大比例 user-scalable 用户是否可以手动缩放 minimal-ui iOS 7.1的Safari为meta标签新增minimal-ui属性，在...

初次微信web开发遇到的问题

最近的工作是进行公司的宣传相关内容制作，包括什么宣传资料啦，产品宣传图啦还有网站和微信页这些东西。 虽然平时也经常会做做平面设计，不过毕竟不是专业的，所以做的... 结果移动端web经验不足的我遇到了很多的问

相关热词 c# 获取泛型参数 c# 获取引用变量地址 c# 加载系统自带的字体 c# unity 结构体 c# 路径提示拒绝访问 c# 换行连接 c# 创建接口 c# 取绝对值函数 c# 打印机首选项 c# json通用类