head之间的一些meta和屏幕自适应的一些元素

meta标签，这些meta标签在开发web app时起到非常重要的作用

(1)<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />

(2)<meta content=”yes” name=”apple-mobile-web-app-capable” />  //允许全屏模式浏览

(3)<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />

(4)<meta content=”telephone=no” name=”format-detection” />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

 

忽略将页面中的数字识别为电话号码

忽略Android平台中对邮箱地址的识别

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对iOS的safari

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

其中：

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

 

在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。

禁止横屏：

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

字体字适应：(vw为自适应)

字体属性： font-size: 20 px ;

100% = 1em = 1rem = 16px = 12pt

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

vw： viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh： viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin： vw和vh中较小的那个。
vmax： vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

图片自适应：

响应式图片srcset全新释义sizes属性w描述符

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo." />