阻止移动设备(手机、pad)浏览器双击放大网页的方法
发布时间:2014-06-03 09:56:29 作者:佚名
我要评论
这篇文章主要介绍了阻止移动设备(手机、pad)浏览器双击放大网页的方法,需要的朋友可以参考下
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?
在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的标签
相关文章
- 这篇文章主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法,2016-02-22
分享29个基于Bootstrap的HTML5响应式网页设计模板
如今基于Bootstrap框架的免费HTML5网站已经开始成为行业趋势。研究人员已经证实,Bootstrap是引领设计和开发行业趋势效果最为显著的,本文给大家分享29个基于Bootstrap的HT2015-11-19- 这篇文章主要介绍了使用纯HTML5编写一款网页上的时钟的代码分享,程序非常简单且没有时钟上的数字显示,纯粹体现最基本的设计思路,需要的朋友可以参考下2015-11-16
- 今天和大家分享一款倒计时网页教程,2014年的圣诞节即将来临之季。爱编程小编给大家分享一款2014年圣诞节倒计时网页,当天的日期卡片有抖动的效果,需要的朋友可以参考下2014-12-05
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites2014-05-07- 这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下2014-04-03
- 在编写html5时简单的调试了下与PHP协同使用后,发现在不少情况下js、css等会失效,调试后发现网页在跳转时仍有缓存,需要指出原网页和跳转后网页的关系,具体代码如下2013-12-31
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件,看到此处是不是感觉特别惊讶啊,WebGL有一个很好的中文教程,就是下面使用参考中的2013-01-31- HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通过大量的JS代码来实现,而如今html5大大简化了网页元素的拖放操作编程难度,API除了2013-01-02
- 为了帮助了解当今HTML 5的一些新玩意儿,我们现在就进入正题,开始使用一些新的结构元素。我们创建HTML 5文档第一件需要做的事情就是使用新的文档类型。2010-05-30


最新评论