阻止移动设备(手机、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弹性盒模型实例介绍
May 27 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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
ThinkPHP中order()使用方法详解
2016/04/19 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
J2EE面试题大全
2016/08/06 面试题
后勤园长自我鉴定
2013/10/17 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
原材料检验岗位职责
2014/03/15 职场文书
学生请假条格式
2014/04/11 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
倡议书作文
2015/01/19 职场文书
工作自我评价范文
2019/03/21 职场文书