一、背景

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

    Shanghai Regional Online Contest 1004 In the ACM International Collegiate Programming Contest, each ...

  2. Marsedit 破解版下载(3.5.6)

    Marsedit 破解版下载(3.5.6) 最近在 Mac 端写文章经常遇到棘手的问题,最近发现了 marsedit 现在分享给大家 marsedit downloads

  3. 【PHP面向对象(OOP)编程入门教程】7.特殊的引用”$this“的使用

    现在我们知道了如何访问对象中的成员,是通过”对象->成员”的方式访问的,这是在对象的外部去访问对象中成员的形式, 那么如果我想在对象的内部,让对象里的方法访问本对象的属性, 或是对象中的方法去调 ...

  4. Cache and Virtual Memory

    Cache存储器:电脑中为高速缓冲存储器,是位于CPU和主存储器DRAM(DynamicRandonAccessMemory)之间,规模较小,但速度很高的存储器,通常由SRAM(StaticRando ...

  5. hash-5.ConcurrentHashMap

    http://www.cnblogs.com/dolphin0520/p/3932905.html有时间细看

  6. IDEA之google style配置（IDEA）

    一.window下IDEA配置谷歌编码规范xml 1.首先下载文件:intellij-java-google-style.xml(文件详细内容见附件) 2.找到该路径(C:\Users\自己的登录名 ...

  7. ASP.NET实现验证码

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  8. X.Org可能将失去它的域名x.org

    X.Org基金会面临失去它的一个重要资产:单字母域名x.org.过去半年里,围绕着x.org域名的所有权问题,X.Org基金会董事会尝试私下解 决,但未能如愿.域名将于1月19日过期,只剩下不到两周的 ...

  9. CSS继承总结

    CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

  10. Android 中 SQLite 数据库的查看

    当 SQLite 数据库创建完成后,如何查看数据库的内容呢?如果直接使用 File Explorer 查看,最多只能看到 database 目录下出现了一个 BookStore.db 文件,Book ...