IE 10 禁用多点触摸放大缩小页面

2024-05-11 04:48

本文主要是介绍IE 10 禁用多点触摸放大缩小页面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近在做项目的时候,要求禁用页面的放大缩小功能,在可触摸的终端,是可以通过多手指去放大缩小页面的,通常我们都是通过加<meta>标签:

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

但其实这样根本没用,于是我又通过监听touchstart touchmove 进行拦截(当触摸屏幕的手指 >=2 时才拦截事件),但是发现在 IE10 上面根本没有作用,还是能够通过手指去放大缩小界面,其他浏览器就正常,经过调试发现,IE10下根本就没有走touch相关的事件,没有监听到当然也就无法拦截了,这下让我很懵逼,IE 系列总是这么让人头疼。。。。

没办法,问题还是要解决的,怎么办呢,于是上官网找了找了 ,总算找到了解决方法 ,以下是官方代码:

Advanced gesture input

<style>html {overflow: hidden;-ms-content-zooming: none; /* Disable pan/zoom */}#foo {background-color: red;width: 500px;height: 500px;-ms-transform-origin: 50%;-ms-transform-origin: 50%;}
</style>
<div id=”foo”></div>
<script>function handleEvent(event) {event.target.style.msTransform = “scale(“ + event.scale + “)”;}document.getElementById(“foo”).addEventListener(“MSGestureChange”, handleEvent, false);
</script>

详情请点击:Touch Events For IE 10

主要看html中的样式 :

-ms-content-zooming:none;

没错就是这一句,就解决了。有点坑爹啊,IE总是喜欢搞事,真是害苦了我们搞前端的。

这篇关于IE 10 禁用多点触摸放大缩小页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/978545

相关文章

JAVA读取MongoDB中的二进制图片并显示在页面上

1:Jsp页面: <td><img src="${ctx}/mongoImg/show"></td> 2:xml配置: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001

JavaScript全屏,监听页面是否全屏

在JavaScript中,直接监听浏览器是否进入全屏模式并不直接支持,因为全屏API主要是关于请求和退出全屏模式的,而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是,你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。 以下是一个基本的示例,展示了如何使用全屏API来请求全屏模式,并在请求成功或失败时更新一个状态变量: javascriptlet isInFullscreen =

vue同页面多路由懒加载-及可能存在问题的解决方式

先上图,再解释 图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在

vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的//js中allKeyup(e

vue子路由回退后刷新页面方式

最近碰到一个小问题,页面中含有 <transition name="router-slid" mode="out-in"><router-view></router-view></transition> 作为子页面加载显示的地方。但是一般正常子路由通过 this.$router.go(-1) 返回到上一层原先的页面中。通过路由历史返回方式原本父页面想更新数据在created 跟mounted

Sapphire开发日志 (十) 关于页面

关于页面 任务介绍 关于页面用户对我组工作量的展示。 实现效果 代码解释 首先封装一个子组件用于展示用户头像和名称。 const UserGrid = ({src,name,size,link,}: {src: any;name: any;size?: any;link?: any;}) => (<Box sx={{ display: "flex", flexDirecti

XMG 触摸事件的处理过程

1.自己本身并不处理,顺着响应者链条向上传递,将事件交给响应者进行处理 2.touches默认做法:把事件传递到上一个响应者 3. super是父类不是父控件

关于页面中运行vbscript

2019年4月10日18:16:09  遇到了jsp中嵌套vbs怎么运行都没反应,后台也能把数据传到前台,把vbs代码单独拎出来也能正常运行,但是就是在页面中怎么都没反应,后来度娘,才有一下结论,特此记录 环境要求:IE11以下版本 <script language="VBScript"> msgbox(123) </script> 其他浏览器或者IE11以上版本的浏览器不会执行vbs

IE加载项的问题

问题描述: ie8 在网页中查看pdf文件,adobe xi已经安装了,但是在ie加载项中就是没有有关adobe的加载项,无缘无故消失了,后来通过资料查找,试了很多种方法都不见效,无意中发现ie打开的快捷方式 有-extoff参数设置,于是删除这个参数之后,加载项成功加载了。 解决方法: 首先得安装adobe相关软件,然后查看ie打开的快捷方式中是否有-extoff参数设置。

关于IE get 请求报400

问题描述: 在使用IE8进行get请求时,参数中有中文存在,发现发送请求之后,返回http状态码400 问题解决方法: 把请求连接进行处理window.encodeURI('http://aaa:8080/wtp?name=小明'); window.location.href=window.encodeURI('http://aaa:8080/wtp?name=小明'); 然后在把处理后