一、背景

　　在当今这个移动设备发展越来越快，并且技术越来越成熟的时代，移动设备成了企业扩展业务不可或缺的重要领域之一，随之而来的是适应手机的网站层出不穷，在开发过程中，我们往往会遇到一个很尴尬的问题：移动端网页在用户双击屏幕时会变大，导致整个页面的布局错误，非常 影响最终效果，下面介绍一种通过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. Timestamp 使用

    Timestamp是一个长整形的类型 1.使用方法一 Timestamp nowdate1 = new Timestamp(System.currentTimeMillis()); System.ou ...

  2. Java项目相关监控与调优

    Linux  JVM Tomcat =========Linux =============== 监控 nmon  命令:nmon -s 10 -c 60 -f -m /home -s 10 每10s ...

  3. c#常用的Datable转换为json，以及json转换为DataTable操作方法

    #region  DataTable 转换为Json字符串实例方法 /// <summary> /// GetClassTypeJosn 的摘要说明 /// </summary> ...

  4. APPCAN IDE中安装emmet插件

    1.首先打开APPCAN IDE 2.帮助(help)-安装新软件(install New sofaWare) 3.打开Install窗口,点击 Add,在Add Repository窗口中,Name ...

  5. DAY2 Python 标准库 -> Getpass 模块 -> 命令行下输入密码的方法.

    getpass 模块 getpass 模块提供了平台无关的在命令行下输入密码的方法. getpass(prompt) 会显示提示字符串, 关闭键盘的屏幕反馈, 然后读取密码. 如果提示参数省略, 那么 ...

  6. iOS开发——常见错误——使用MJRefresh返回上一个界面蹦掉的情况

    最近在使用MJRefresh框架时发现了一个bug 下面是我的源代码 前一个界面 -(void)tableView:(UITableView *)tableView didSelectRowAtInd ...

  7. Linux 利器- Python 脚本编程入门（一）

    导读 众所周知,系统管理员需要精通一门脚本语言,而且招聘机构列出的职位需求上也会这么写.大多数人会认为 Bash (或者其他的 shell 语言)用起来很方便,但一些强大的语言(比如 Python)会 ...

  8. iOS 开发 初级：应用内购买 In-App Purchase

    http://blog.csdn.net/songrotek/article/details/8680415 现在有很多应用都使用了In-App Purchase,虽然对于很多用户来说,可能并不喜欢甚 ...

  9. 跟着百度学PHP[4]OOP面对对象编程-4-对象成员的访问 ->

    使用一个减号一个尖括号->来达到访问对象成员. $object->方法 来看案例. <?php class Person{ private $name; "; var $s ...

  10. 【笔记】CSS高级选择器:nth-child()

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...