html5 viewport常用属性

控制显示区域各种属性：

<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport">

IOS中Safari允许全屏浏览：

<metacontent="yes"name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式：

<metacontent="black"name="apple-mobile-web-app-status-bar-style">

忽略将数字变为电话号码：

<metacontent="telephone=no"name="format-detection">

忽略邮箱地址：

<metacontent="email=no"name="format-detection">

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

IOS中Safari设置保存到桌面图标：

这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px

<linkrel="apple-touch-icon"href="custom_icon.png">

强大的CSS属性box-flex

之所以将这块作为大栏目来讲，是因为这个属性非常有用，和之前开发win8app时的grid非常相似。

box-flex的作用是按百分比划分兄弟相同标签的width，也就是当ul里有个两个li时，每个li会自动划分ul的宽度，如果box-flex:1;那么此时，li的width就是50%

box-flex用法实例1：

<ul>
<li>11111</li>
<li>2222222</li>
<li>333333333</li></ul>

ul{display:-webkit-box;}ulli{-webkit-box-flex:1;}

IOS下移除按钮原生样式-webkit-appearance

下面这句代码就是重置这些样式的：

input[type=button]{	-webkit-appearance:none;/*这句*/	outline:none}