关闭

解决移动端禁止双指缩放功能

时间: 2019-01-03阅读: 5239标签: 移动端

在实际开发中,我们禁止缩放的实现方式:


meta设置:

<meta name="viewport"  content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
user-scalabel=no或者user-scalabel=yes(yes是可以缩放,no或者0是不能缩放)


在ios10以上的系统中,并不支持meta标签,需要我们通过脚本实现:

window.addEventListener(
	"touchmove",
	function(event) {
		if(event.scale !== 1) {
			event.preventDefault();
		}
	}, {
		passive: false
	}
);


注意:禁用双指缩放后,scroll事件需要重新绑定,滚动条的事件监听touchmove,touchstart,touchend;


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1749

关闭

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

方案一:使用lib-flexible包:使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 预处理语言写适配方案:基准按照设计图尺寸,但是缺点是不通用,不同页面可能设计图基准尺寸不同

总结几个移动端H5软键盘的大坑

部分机型软键盘弹起挡住原来的视图解决方法:可以通过监听移动端软键盘弹起,Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。

移动端重置样式 特殊处理

禁止用户选中文字,安卓无效 ­webkit­user­select: none;禁止长按弹出系统菜单。 ­webkit­touch­callout: none;

移动端适配必须掌握的基本概念和适配方案

随着技术的发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素的差异,移动端开发面临着多分辨率适配的问题

移动端的3种适配方法

做移动端页面以来,经常会听说移动端的适配这个问题,但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的flexible.js进行页面适配的。适配的根本原理其实就是将设计稿按一定的比例在不同的手机上实现

移动端双指缩放图片JS事件的实践心得

页面整体缩放行为是可以通过按住Shift键+页面左键模拟的,但是,实际上,还是一个触摸点,因此无法模拟双指缩放行为。除非是有触摸板,或者屏幕就是触摸屏。

解决移动端1px边框最好的方法

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。

h5 与原生 app 交互的原理

现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。

移动端适配的实现

rem原理通过设置html的fontSzie来实现动态rem,其实就是将页面百分比化 ,html为50px; 可以得到1rem为50px(html被分为100rem)。那么:box的1.25rem宽度就可以得到为(50*1.25)px

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!