阻止移动设备(手机、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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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变量内存分配问题记录整理
2013/11/27 PHP
php实现文件下载代码分享
2014/08/19 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
提高网站信任度的技巧
2008/10/17 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python适配器模式代码实现解析
2019/08/02 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python dumps和loads区别详解
2020/02/04 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python打开文件的方式有哪些
2020/06/29 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
JMS中Topic和Queue有什么区别
2013/05/15 面试题
3分钟演讲稿
2014/04/30 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
员工保密承诺书
2014/05/28 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL