阻止移动设备(手机、pad)浏览器双击放大网页的方法


Posted in HTML / CSS onJune 03, 2014

现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?

在Mobile页面上有提供viewport这个meta,可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明,移动设备要用下面这个声明。

复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
复制代码
代码如下:
<meta name="viewport" content="user-scalable=0" />

但是为了更好的兼容,我们会使用完整的viewport设置。

复制代码
代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

如果需要更详细的关于viewport的资料可以参考MDN

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

貌似DTD只声明成HTML5就可以了,下面加上viewport的标签

HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 #HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 #HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 #HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 #HTML / CSS
html5设计原理(推荐收藏)
May 17 #HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 #HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 #HTML / CSS
You might like
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python搭建微信公众平台
2016/02/09 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python 将md5转为16字节的方法
2018/05/29 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
python tkinter基本属性详解
2019/09/16 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python制作微博图片爬取工具
2021/01/16 Python
python链表类中获取元素实例方法
2021/02/23 Python
好的自荐信包括什么内容
2013/11/07 职场文书
优秀求职信范文分享
2013/12/19 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android