阻止移动设备(手机、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 02 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
纯html+css实现Element loading效果
Aug 02 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旋转图片90度的方法
2013/11/07 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP echo()函数讲解
2019/02/15 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
js选项卡的制作方法
2017/01/23 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python实现自动签到脚本功能
2020/08/20 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
公积金单位接收函
2014/01/11 职场文书
幼儿教师考核制度
2014/01/25 职场文书
制作部班长职位说明书
2014/02/26 职场文书
党员演讲稿
2014/09/04 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
英语邀请函范文
2015/02/02 职场文书
西安大雁塔导游词
2015/02/10 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
Python List remove()实例用法详解
2021/08/02 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers