一、背景

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

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  2. Logistic 回归(sigmoid函数，手机的评价,梯度上升，批处理梯度,随机梯度，从疝气病症预测病马的死亡率

    (手机的颜色,大小,用户体验来加权统计总体的值)极大似然估计MLE 1.Logistic回归 Logistic regression (逻辑回归),是一种分类方法,用于二分类问题(即输出只有两种).如 ...

  3. java之Date

    1.java时间处理 package com.bmkit.util.date; import java.text.DateFormat; import java.text.ParseException ...

  4. CSS中font-size、font-family、line-height顺序以及简写属性

    顺序: font-size       line-height       font-family body { font-size: 12px}; h1 { font: bold 200%/1.2 ...

  5. Java设计模式 之 命令模式

    1      从属模式分类 行为性模式 2      命令模式意图 命令模式可将动作的请求者和动作的执行者对象中解耦. 该模式将一个行为操作发起者的请求封装到对象中,该请求由另外一个对象执行. 将动作 ...

  6. java使用split分隔，需要注意的点

    String severName = "10.6.62.244"; System.out.println(severName.split(".").length ...

  7. iOS开发——高级篇——内存分析，Instruments

    一.内存分析 1.静态内存分析(Analyze)不运行程序,直接对代码进行内存分析,查看代码是否有内存泄露优点:分析速度快,并且可以对所有的代码进行内存分析缺点:分析结果不一定准确(没有运行程序,根据 ...

  8. 剑指Offer 整数中1出现的次数（从1到n整数中1出现的次数）

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...

  9. BZOJ 1485: [HNOI2009]有趣的数列

    Description 求长度为 \(2n\) 的序列.要求 1. \(a_1<a_3<a_5<...<a_{2n-1}\) . 2. \(a_2<a_4<a_6& ...

  10. PHP5.4开启zend opcache缓存

    PHP5.5整合了zend opcache,但是5.4以下的需要自己安装. 介绍一下开启opcache方法,环境为wamp(php5.4.16) 下载dll文件 把php_opcache.dll放进p ...