<meta name="viewport" content="height=[pixel_value | device-height], width=[pixel_value | device-width], inital-scale=float_value, minimum-scale=float_value, maximum-scale=float_value, user-scalable=[yes|no], target-densitydpi=[dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]" />

width:控制 viewport的大小,可以指定一个值或者特殊的值,如 device-width为设备的宽度(单位为缩放为 100%时的 css 的像素)

height:和width相对应,指定高度

initial-scale:初始缩放,即页面初始缩放程序,这是一个浮点值,是页面大小的一个乘数,例如,如果你设置初始缩放为 "1.0",那么,web页面在展现的时候就会以 target density分辨率  1:1 来展现,如果设置为 2.0,则这个页面就会放大 2倍

maximum-scale:最大缩放。即允许的最大缩放程序。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如:如果将这个值设置为 2.0,则这个页面与 target size 相比, 最多就会被放大为 2 倍

user-scalable:用户调整缩放。即用户是否能改变页面缩放程度,如果设置为 yes,则是允许用户对其进行改变,反之为 no,默认为 yes,如果设置为 no,则 minimum-scale, maximum-scale都被忽略
所有的缩放值都必须为 0.01-10之间

target-densitydpi:一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。android支持三种屏幕像素密度,低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。android browser 和 webview默认屏幕为中像素密度。
取值如下:
device-dpi:使用设备原来的 dpi作为目标 dp,不会发生默认缩放
high-dpi:用 hdpi作为目标 dpi,中等像素密度和低像素密度设备相应缩小
medium-dpi:用 mdpi作为目标dpi,高像素密度设备相对放大,这是默认的 target density.
low-dip:(原理同上)
value:指定一个值,必须为 70-400之间
as:
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-desitydpi=200" />

<meta content="telephone=no" name="format-detection" />
告诉设备忽略将页面中的数字识别为电话号码

iphone设备特有的:
<meta content="yes" name="apple-mobile-web-app-capable" />
允许全屏模式浏览
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
指定的 iphone中的 safai顶端的状态的样式
在 web app应用下状态条(屏幕顶部条)的颜色:
默认值为 default(白色),可以定义为 black(黑色)和 black-translucent(灰色半透明)
注意,若值为 black-translucent 将会占据页面 px 位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)
示例:
天猫:
<meta content="width=device-width,inital-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

淘宝:
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no" name="format-detection" />

网易:
<meta content="width=device-width,user-scalable=no" name="viewport" />

html5 meta头部设置的更多相关文章

  1. 最全html5 meta设置详解 (转)

    meta 详解,html5 meta 标签日常设置   <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. HTML5的头部、拨号、短信、邮件(转)

    HTML5[语法要点] 一.头部设置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!--页面窗口自动调整到设备 ...

  4. 移动端meta标签设置

    移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...

  5. 简单手机端头部设置 及css代码

    <html> <head> <title>今日报表</title> <meta http-equiv="Content-Type&quo ...

  6. meta标签设置(移动端)

    一.首先出结论:移动端meta标签一般设置为: <meta content="width=device-width,initial-scale=1.0,maxinmum-scale=1 ...

  7. Sublime Text 3如何快速生成HTML5的头部信息和常用的快捷键

    一.快速生成HTML5的头部信息的步骤: 1.Ctrl + N,新建一个文档: 2.Ctrl + Shift + P,打开命令模式,再输入 sshtml 进行模糊匹配,将语法切换到html模式: 3. ...

  8. 关于python脚本头部设置#!/usr/bin/python

    今天又是贼几把菜的一天0.0 读别人程序的时候看到在python文件头部设置签名,感觉贼几把酷,自己也试着在文件前段设置了一下. 设置还是蛮简单的,设置过程如图所示. 设置后如图所示: 当然你也可能看 ...

  9. HTML5自定义属性的设置与获取

    <div id="box" aaa="bbb" data-info="hello"></div> <body& ...

随机推荐

  1. 【39】明智而审慎第使用private继承

    1.private继承意味着,根据某物实现出,继承父类的实现,关闭父类的接口,并不是Is-A的关系,不满足里氏代换,继承的内容访问权限都修改为private. 2.那么问题来了,复合也表达根据某物实现 ...

  2. PCL 点云数据操作 OpenCV遍历数据

    1.对于点云类型实例cloud,对其第i个点进行赋值操作,使用cloud.point[i].x 和 cloud.point[i].y 和cloud.point[i].z 分别对其XYZ坐标赋值. cl ...

  3. Android下实现GPS定位服务

    1.申请Google API Key,参考前面文章 2.实现GPS的功能需要使用模拟器进行经纬度的模拟设置,请参考前一篇文章进行设置 3.创建一个Build Target为Google APIs的项目 ...

  4. java 引用类型及作用

    0. 引言 Java 中一共有 4 种类型的引用 : StrongReference. SoftReference. WeakReference 以及 PhantomReference , 这 4 种 ...

  5. android中的界面编程

    主要是用View以及ViewGroup,同时ViewGroup又是View的子类,充当容器. 主要有两种方法控制view的行为: 1.在XML布局文件中通过XML属性进行控制 2.在Java代码中通过 ...

  6. linux 学习笔记 GNU工具链简介

    我们通常无法直接通过Linux内核,而需要借助Linux内核之上的GUN工具链来进行 文件处理 文本操作 进程管理 等操作. GNU/Linux shell为用户提供了 启动程序 管理文件系统上的文件 ...

  7. Oracle建表实例

    建表一般来说是个挺简单的事情,但是Oracle的建表语句有很多可选的参数,有些我们可能平时不太用,用的时候又不知道怎么用,这里就写一个较完整的建表的例子: CREATE TABLE banping  ...

  8. Maven初学之经验浅谈

    关于Maven这个东西,我不做任何评价. 直接上资料,适合初学者 推荐资料 http://www.imooc.com/learn/443 www.imooc.com/article/15037 还有个 ...

  9. (转载)研究openvswitch的流量模式

    最近又开始弄openvswitch,网上也有不少的资料,但是发觉都集中在openvswitch安装及简单使用或者一些原码分析,从心里来讲,感觉这些和心里得到的差距有点大啊,其实更希望能类似资料在ope ...

  10. JSON数据理解

    话说JSON数据平常用的确实挺多的,但是基本上只知道怎么用,对其一些细节并没有整理过,今儿趁着下午有点空,坐下来,学习整理下,并分享出来. 对于JSON,首先它只是一种数据格式,并非一种语言,虽然和j ...