一、背景

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

    会了jquery语法,会了jquery函数,你就真的会了jquery吗,来看这张图!是超实用的jquery代码段一书的导览!熊孩子们,赶紧学习去吧! 对于码农来说,代码就是生产力,你每天能码多少行并不 ...

  2. ASN.1编码

    来自几年前本人写的一篇博客 http://blog.csdn.net/newyf_cun/article/details/13016069 如下使用libtasn1分析asn1的编码规则. http: ...

  3. CodeForces 615B Longtail Hedgehog

    题目: http://codeforces.com/problemset/problem/615/B 题意:题目描述很复杂,但实际上很简单.大意就是连续的几个点组成尾巴,要求尾巴的长度乘以尾巴终点的分 ...

  4. ORA-22868: 具有 LOB 的表包含有位于不同表空间的段

    由于lob对象引起的表空间无法删除.本来是要删除DMS表空间,但是上面有LOB对象,而且表却是在别的表空间DMS4上.解决的办法就是将这些lob移动到DMS4表空间.下面是解决过程 删除用户时报错: ...

  5. java网络osi基础

  6. 在framework中打包xib

    废话不多说,直接上图 1.Copy Bundle Resources 中加入相关xib 2.这里是重点,调用的时候不能直接写 [[NSBundle mainBundle] loadNibNamed:@ ...

  7. hiberante学习笔记

    1.配置文件(hibernate映射文件): 让hibernate知道该怎么样去load,store持久化对象: 1.1 数据库忌讳的字段名 1) User 2) index 2.数据库表中一对多,多 ...

  8. BZOJ 2342: [Shoi2011]双倍回文

    Sol Manacher. 非常裸的Manacher啊...为什么有那么多人写Manacher+并查集?Set?Treap?...好神奇... 你只需要在 \(p[i]++\) 的位置加上判断就可以了 ...

  9. 保存字符串到手机SDcard为txt文件

    try { if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) { File sdCardDir ...

  10. Nagios+zabbix+ganglia的相关参数分析和优缺点介绍

    转自: http://blog.csdn.net/messiaDemo/article/details/52046822?utm_source=itdadao&utm_medium=refer ...