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页面手机端禁止缩放的正确方式的更多相关文章

  1. h5手机端禁止缩放问题

    最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="wid ...

  2. vue H5页面手机端 利用canvas 签名

    签名首先用一个canvas标签,上面加三个代码,分别是点击,移动,离开.这里点击是开始画笔的地方,如果不加@touchstart 笔头会发生偏移,可以试试. @toucheend也是如此.尾巴也会出现 ...

  3. h5实现手机端等级进度条

    h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...

  4. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  5. 手机端禁止iPhone字体放大

    /*禁止iphone字体放大 */ html { -webkit-text-size-adjust: none; }

  6. 移动端H5页面如何屏蔽双击缩放的功能?(转)

    来自大佬的回答: 我在我们的页面中加了很多,除了ios10以上的safari不兼容以外还没有遇到过不兼容的情况. <!-- 视图窗口,移动端特属的标签. --> <meta name ...

  7. js实现双指缩放图片 手机端双指缩放图片

    首先引入js文件,需要jq,pinchzoom.js.pinchzoom.js需要在jq环境下使用,可以 <meta name="viewport" content=&quo ...

  8. Asp.net窄屏页面 手机端新闻列表

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchNotice.a ...

  9. 解决ios10以上H5页面手势、双击缩放问题

    html:<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable= ...

随机推荐

  1. jQuery 滚动条滚动

    1.将div的滚动条滚动到最底端 <div class="container"></div> var $container=$(".contain ...

  2. Java设计模式—解释器模式&迭代器模式简介

       解释器模式在实际的系统开发中使用得非常少,因为它会引起效率.性能以及维护等问题,一般在大中型的框架型项目能够找到它的身影,如一些数据分析工具.报表设计工具.科学计算工具等,若你确实遇到" ...

  3. python item repr doc format slots doc module class 析构 call 描述符

    1.item # __getitem__ __setitem__ __delitem__ obj['属性']操作触发 class Foo: def __getitem__(self, item): r ...

  4. 【Leetcode】【Easy】Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  5. POP动画[3]

    POP动画[3] 这一节主要讲解POP动画的自定义动画属性. POP动画中有一个参数,叫timingFunction,与CoreAnimation中的一个参数CAMediaTimingFunction ...

  6. JavaScript学习---JavaScript基础知识

    JavaScript的引入方式 JavaScript的引入方式: 1.直接在script里面写: 2.使用<script src="JS的文件位置"> {#1 直接编写 ...

  7. OSG3.0.1的编译

    在OSG-中国有很多关于OSG的资料,包括OSG的编译和教程. 要编译OSG首先需要准备的包: 1,OSG3.0.1源代码: 2,CMAKE: 3,OSG用到的第三方库: 4,OSG Data:OSG ...

  8. 深入浅出SharePoint2010——请假系统无代码篇之数据框架设计

    文档库SOP:上传用户操作手册等系统相关文档. 员工信息列表EmployeeInfo:用来存储员工基本信息.直属领导和假卡信息. 请假申请列表LeaveRequest:申请人Requester填写请假 ...

  9. opencv python3.6安装和测试

    安装: 命令行  pip install D:\python3.6.1\Scriptsopencv_python-3.2.0-cp36-cp36m-win_amd64.whl 测试代码: import ...

  10. #Alpha Scrum6

    Alpha Scrum6 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:督促和监督团队进度 陈彬:博客编写 吴沂章.林锃寒:代码功能完善 林志 ...