阻止手指缩放手机浏览器页面

首先在html的head头部加：

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

听说iOS 10 开始，meta 设置在 Safari 内无效了，在 iOS 的其他浏览器上也会相应出现无法禁止缩放的情况出现。

解决办法从网上找的，好像是行得通，在需要禁止缩放的页面导入下面 JS 配置：

//阻止双指放大document.addEventListener('gesturestart', function(event) {event.preventDefault()})//阻止双击放大var lastTouchEnd = 0;document.addEventListener('touchstart', function(event) {if (event.touches.length > 1) {event.preventDefault();}});document.addEventListener('touchend', function(event) {var now = (new Date()).getTime();if (now - lastTouchEnd <= 300) {event.preventDefault();}lastTouchEnd = now;}, false);

本人暂时未碰上需要禁止左右滑动的，所以相应方法还没试。

阻止手指缩放手机浏览器页面相关推荐

jsp页面适应手机屏幕_Jsp编写的页面如何适应手机浏览器页面
经常遇到JSP网页需要适配手机设备的尺寸问题解决: 在JSP加入 content属性值 : width:可视区域的宽度,值可为数字或关键词device-width(设备的宽度) maximum-sc ...
手机浏览器页面知识收集
wap手机网页css(wap css) 大部分手机现在都支持XHTML浏览器,这意味着我们只需在stylesheets的类型设置成"handheld"即 * { position: ...
手机浏览器页面知识收集（转）
wap手机网页css(wap css) 大部分手机现在都支持XHTML浏览器,这意味着我们只需在stylesheets的类型设置成"handheld"即 * { position: ...
阻止苹果xs max浏览器页面整体滚动
今天发现一个神奇的现象,在苹果xs max型号手机上滑动一个列表页面,整个页面(包括顶部fix的头组件)都在滑动,网上称之为橡皮筋效果. 页面的滚动看起来比较乱,其实知道原理可以分析出: 外层的滚动( ...
html微信窗口阻止滚动条,解决微信浏览器页面可以随意拉伸，导致页面内部滚动条滚动体验不好的问题...
很多情况,我们页面局部可以滚动,但是由于微信浏览器整个页面可以拉伸,导致页面内部的滚动体验不好.所以我们可以把整个页面的滑动事件给禁用掉,然后让页面的某一个区域可以正常的滑动,就可以达到我们理想的效果 ...
仿写携程旅游手机浏览器页面
xiecheng.html <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
移动端手机浏览器页面出现上下滑动页面是涩的感觉，不流畅
最近在做手机端页面时,出现了上下滑动页面感觉很涩.不流畅的问题,经过在网上一番查找,发现添加如下代码就好: body { -webkit-overflow-scrolling: touch; over ...
html兼容手机浏览器
其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport" content="width=device ...
一键分享手机代码_通过广告路由器指定手机浏览器自动认证WIFI上网附代码
说说应用过程,下面用手机QQ浏览器为例.在路由器搭建免费WIFI,用户连接免费WIFI后,使用手机QQ浏览器点击打开任意网页即可自动通过认证并上网,有的手机会自动打开认证网页,如果使用其他手机浏览器则 ...

阻止手指缩放手机浏览器页面

阻止手指缩放手机浏览器页面

阻止手指缩放手机浏览器页面相关推荐

最新文章

热门文章