一、背景

  在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移动端网页在用户双击屏幕时会变大,导致整个页面的布局错误,非常 影响最终效果,下面介绍一种通过html的meta标签来阻止该现象发生的办法。

二、解决办法和原理

  1.首先设置网页的DOCTYPE

 <!DOCTYPE html>
<html>
....
</html>

  2.在网页的 head 之中添加 viewport meta 标签,如下所示:

 <meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">

  width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

  initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

  user-scalable=no在移动设备浏览器上可以禁用其缩放(zooming)功能。

  maximum-scale=1.0通常情况下与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

三、总结

  这样设置完成以后,我们就完成了阻止移动设备上双击导致网页放大以致网页布局错乱的问题,有木有很开心?

Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页的更多相关文章

  1. 手机浏览器页面点击不跳转(Android手机部分浏览器) 浏览器双击放大网页 解决

    手机端web网页项目(angluar js 1.4.6) 1,网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转 ...

  2. 这个meta标签会让华为mate10 pro自带浏览器无法粘贴手机收到的验证码信息

     前言 最近在项目中遇到一个问题,注册登录界面点击获取验证码,手机收到短信验证码后可以复制成功,但无法粘贴 让人郁闷的是在其它上手机上的(比如小米,苹果)默认浏览器和其它手机浏览器(比如QQ,夸克,搜 ...

  3. 手机网页制作教程META标签你知道多少?【转+加】

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  4. meta标签大全

    meta标签大全 <!--     x-ua-compatible(浏览器兼容模式)     仅对IE8+以效     告诉浏览器以什么版本的IE的兼容模式来显示网页     <meta ...

  5. webkit内核中的一些私有的meta标签

      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&q ...

  6. 比较各大挪动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同

    首先先展示一下各个网站的有关meta标签的代码: 网易 <meta charset="UTF-8"> <meta content="width=devi ...

  7. 手机端特有的meta标签有哪些?

    3.1 meta 语法 定义和用法:name 属性把 content 属性连接到 name. 语法:name=author|description|keywords|generator|revised ...

  8. meta标签用法总结

    注:本文并非本人撰写,摘自百度百科 meta标签用来描述一个HTML网页文档的属性,例如作者.日期和时间.网页描述.关键词.页面刷新等. 一.作用:       META标签是HTML标记HEAD区的 ...

  9. 【JSP】<meta>标签用法

    转载自:http://blog.sina.com.cn/s/blog_65c74cce0102v39z.html  非常感谢这位博主,急着用,改日再细细品味重新整理这篇博文. http-equiv M ...

随机推荐

  1. HDOJ 4750 Count The Pairs

    按边长从小到大排序...再逐个加入(就像MST一样)最先联通的点之间最长路径中的最小值就是新加入的边的长.... Count The Pairs Time Limit: 20000/10000 MS ...

  2. springmvc 数据精准绑定

    因为使用dwz 的lookup功能,回调的值通过name以 xxx.xxValue 来自动得到,而我还有些表单数据的name是没有前缀的, 到springmvc后台绑定的的话默认的绑定是有问题的.这是 ...

  3. go outside @ CULTS LYRICS

    I really want to go out I really want to go outside and stop to see your day You really want to hole ...

  4. 字符集与编码01--charset vs encoding

    声明:此文章转载自 http://my.oschina.net/goldenshaw/blog/304493 许多时候,字符集与编码这两个概念常被混为一谈,但两者是有差别的,作为深入理解的第一步,首先 ...

  5. HDU 5073 Galaxy(2014鞍山赛区现场赛D题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5073 解题报告:在一条直线上有n颗星星,一开始这n颗星星绕着重心转,现在我们可以把其中的任意k颗星星移 ...

  6. CAniamtion 基本使用

    CAAnimation(抽象)<NSCoding, NSCopying, CAMediaTiming, CAAction> QuartzCore框架的基本继承结构 -> CATran ...

  7. cocos2dx 3.7中 AppDelegate.h的class TestController;这种写法的具体意思不太明白,只能猜是类似于外部定义的东西。

    cocos2dx 3.7中 AppDelegate.h的class TestController;这种写法的具体意思不太明白,只能猜是类似于外部定义的东西.

  8. 基于php的snmp管理端开发

    一.系统环境: 操作系统:CentOS 5.4                内核:Linux_2.6 编译环境:gcc 4.1.2                代码版本:php-5.2.8.tar ...

  9. auto与decltype

    今天搜狗笔试的一道选择题,原题给忘了,但记得所考的知识点.知识点很基础,但很容易忽视. 具体内容可参考C++ Primer. auto :变量取auto后,其所对应的类型        auto一般会 ...

  10. PHP中为位运算符(几乎很少用)

    PHP语言里的位运算符&.|.^ .~.〈〈 .〉〉 "&" 按位与运算 按位与运算符"&"是双目运算符.其功能是参与运算的两数各对应的 ...