阻止移动设备(手机、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 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 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
PHP 采集心得技巧
2009/05/15 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js 操作css实现代码
2009/06/11 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python中global与nonlocal比较
2014/11/21 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python 列表反转显示的四种方法
2020/11/16 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
夜不归宿检讨书
2014/02/25 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
退学证明范本3篇
2014/10/29 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android