阻止移动设备(手机、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隔行变换色实现示例
Feb 19 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
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
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
非常好的js代码
2006/06/27 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python实现树形打印目录结构
2018/03/29 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python 读取.nii格式图像实例
2020/07/01 Python
Collection和Collections的区别
2016/05/02 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
校园安全主题班会
2015/08/12 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL