阻止移动设备(手机、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 特效范例整理
Aug 22 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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快速查找数据库中恶意代码的方法
2015/04/01 PHP
php生成mysql的数据字典
2016/07/07 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JS实现移动端在线签协议功能
2019/08/22 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python中的错误处理
2016/04/10 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python之拟合的实现
2019/07/19 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python同时遍历两个list用法说明
2020/05/02 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
商标侵权律师函
2015/05/27 职场文书
九不准学习心得体会
2016/01/23 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python