阻止移动设备(手机、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实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 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
第十四节 命名空间 [14]
2006/10/09 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
使用python存储网页上的图片实例
2018/05/22 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python统计文章中单词出现次数实例
2020/02/27 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python 星号(*)的多种用途
2020/09/21 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
大学生通用个人的自我评价
2014/02/10 职场文书
家长对老师的评语
2014/04/18 职场文书
自我检讨报告
2015/01/28 职场文书
单独二胎证明
2015/06/24 职场文书
大学生见习总结报告
2015/06/24 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis