一、背景

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

    Ruby是一种面向对象编程语言,这意味着它操纵的编程结构称为"对象" 先上代码, 了解类的定义与使用方式 class Computer $manufacturer = " ...

  2. 【bzoj3631】[JLOI2014]松鼠的新家

    题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在"树"上.松 ...

  3. 【bzoj2060】[Usaco2010 Nov]Visiting Cows拜访奶牛

    题目描述 经过了几周的辛苦工作,贝茜终于迎来了一个假期.作为奶牛群中最会社交的牛,她希望去拜访N(1<=N<=50000)个朋友.这些朋友被标号为1..N.这些奶牛有一个不同寻常的交通系统 ...

  4. Chrome Restful Api 测试工具 Postman-REST-Client离线安装包下载，Axure RP Extension for Chrome离线版下载

    [Postman for Chrome 离线下载] Postman-REST-Client离线安装包,可直接在Chrome浏览器本地安装使用,可模拟各种http请求,Restful Api测试, CS ...

  5. shell简单使用

    最近需要用到shell脚本实现关机保护作用,总结下语法 要点: 1.linux下编写的shell脚本不能在window下编写,否则会出现^M的错误,用window编写保存,在linux用vim打开,每 ...

  6. Java 7 Concurrency Cookbook 翻译 第一章 线程管理之四

    七.创建和运行一个后台线程 Java中有一种特别的线程叫做 deamon(后台) 线程.这类线程具有非常低的权限,并且只有在同一个程序中没有其他的正常线程在运行时才会运行.注意:当一个程序中只剩下后台 ...

  7. 使用Monitor调试Unity3D Android程序日志输出（非DDMS和ADB)

    使用Monitor调试Unity3D Android程序日志输出(非DDMS和ADB) http://www.cnblogs.com/mrkelly/p/4015245.html 以往调试Androi ...

  8. 我对自己提的几个关于cocos2dx的几个问题

    1.友元函数的定义: 2.运算符重载: 3.内存关机机制: 4.动作侦听: 5.单点触摸: 6.触摸目标判断: 7.事件传递: 8.多点触摸: 9.加速传感器: 10.物理按键交互: 11.绘图API ...

  9. Android6.0以后动态增加权限

    private void test() throws IOException { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { in ...

  10. svn update错误

    可以再checkout下来一份项目,重新命名,然后将该项目下的隐藏文件夹.svn替换掉原项目 注意备份