H5页面手机端禁止缩放的正确方式
H5页面禁止手机端缩放是个常见问题了
首先说meta方式
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
这个写法一抓一大把,因为使用以后发现页面变形严重,很多人直接丢弃了该方式,实际上是由于width=device-width这一段代码引起的屏幕自适应
有些浏览器是强制开启允许缩放的,于是,使用js的方式在一定的延迟之后将该meta写入header中也是一种方法,但是有些浏览器是无效的
对于双击放大和双指放大,本质上是一种js,找了好久,找到了使用js禁止的方式,代码如下
禁止双指放大
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
禁止双击放大
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
该代码是我一个字不差抄下来的。。。
该方式在手机端适用良好,并且不影响第三方地图的缩放,建议使用
以上
H5页面手机端禁止缩放的正确方式的更多相关文章
- h5手机端禁止缩放问题
最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="wid ...
- vue H5页面手机端 利用canvas 签名
签名首先用一个canvas标签,上面加三个代码,分别是点击,移动,离开.这里点击是开始画笔的地方,如果不加@touchstart 笔头会发生偏移,可以试试. @toucheend也是如此.尾巴也会出现 ...
- h5实现手机端等级进度条
h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- 手机端禁止iPhone字体放大
/*禁止iphone字体放大 */ html { -webkit-text-size-adjust: none; }
- 移动端H5页面如何屏蔽双击缩放的功能?(转)
来自大佬的回答: 我在我们的页面中加了很多,除了ios10以上的safari不兼容以外还没有遇到过不兼容的情况. <!-- 视图窗口,移动端特属的标签. --> <meta name ...
- js实现双指缩放图片 手机端双指缩放图片
首先引入js文件,需要jq,pinchzoom.js.pinchzoom.js需要在jq环境下使用,可以 <meta name="viewport" content=&quo ...
- Asp.net窄屏页面 手机端新闻列表
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchNotice.a ...
- 解决ios10以上H5页面手势、双击缩放问题
html:<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable= ...
随机推荐
- antd-mobile的按需加载
"babel": { "presets": [ "react-app" ] } 主要问题是 依赖项的版本问题 以及 配置问题 新添加的con ...
- 自定义View和ViewGroup(有这一篇就够了)
为了扫除学习中的盲点,尽可能多的覆盖Android知识的边边角角,决定对自定义View做一个稍微全面一点的使用方法总结,在内容上面并没有什么独特的地方,其他大神们的博客上面基本上都有讲这方面的内容,如 ...
- linux下close 掉socket 之后 阻塞的recv 不会立即返回
转载自:http://www.cnblogs.com/wainiwann/p/3942203.html 在开发的一个基于rtmp聊天的程序时发现了一个很奇怪的现象. 在windows下当我们执行 cl ...
- CentOS下二进制包/源码安装方式的MySQL卸载步骤
查看当前系统mysql 运行状态 [root@zendlinux ~]# ps -ef |grep mysql root 1153 1 0 15:40 ? 00:00:00 /bin/sh /usr/ ...
- sqldataAdapter/dataset/datatable的使用
public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Loa ...
- Effective C++ Notes
Item 07 : 为多态基类声明virtual析构函数 #include <iostream> using namespace std; class Base { public: Bas ...
- SAP ABAP里数据库表的Storage Parameters从哪里来的
如何查看ABAP数据库表的storage parameter? 事务码SE11,utilities->Database Object->Database Utility: 点这个Stora ...
- MS10-070 ASP.NET Padding Oracle信息泄露漏洞项目测试
MS10-070 ASP.NET Padding Oracle信息泄露漏洞1 漏洞描述:ASP.NET由于加密填充验证过程中处理错误不当,导致存在一个信息披露漏洞.成功利用此漏洞的攻击 ...
- Cookies的各方面知识(基础/高级)深度了解
Cookies想必所有人都了解本文将围绕Cookies基础知识(什么是Cookies/Cookies如何传递/Cookies如何存储/Cookies如何查看)Cookies高级知识/Cookie的限制 ...
- 020.2.5 Calender对象
内容:日历对象获取时间,设置时间,日期偏移 通过工厂化获得对象.getInstance();get() 获取时间信息 Calendar c = Calendar.getInstance(); //获取 ...