关闭

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

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

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


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

关闭

移动端实现表头固定,tbody滚动的三种方法

实现表头固定,tbody垂直滚动。准备工作:获取页面可是区域高度。方法一:两个table,第一个table放表头,第二个table方内容,通过JS实现监听滚动事件,动态控制表头位置

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

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

vue中的适配:px2rem

这应该是vue项目在适配移动端时候,最简单的方法之一。下载并引入lib-flexible,引入px2rem-loader,将px2rem-loader添加到cssLoaders,完了就可以直接用px做单位按照750的设计稿撸代码了。

vconsole_移动端h5开启控制台的实现

开发内嵌在 web,可能会遇到意想不到的 bug,所以你需要你能在手机上查看的控制台。前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

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

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

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

js判断pc端和手机端

js判断是否为移动端代码,获取用户userAgent代理头的值,进行匹配判断,如果匹配到就进行跳转到移动端。查看当前代理头信息在浏览器中按F12进入调试模式,查看请求

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

移动端H5页面阻止图片和文字被选中

阻止span标签等文字被选中;阻止浏览器点击图片查看的行为(常见于uc浏览器)1.背景图的方式插入(这种是比较普遍的方式),2.使用js事件阻止默认行为的方法

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

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

点击更多...

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