viewport的各種寫法
meta控制顯示區域各種屬性：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
- width:[數字] 或 device-width
- height:[數字] 或 device-height
- initial-scale:最小0.25，最大5
- minimum-scale:最小0.25，最大5
- maximum-scale:最小0.25，最大5
- user-scalable:1 或 0 (yes 或 no)
IOS中Safari允許全屏瀏覽：
<meta content=”yes” name=”apple-mobile-web-app-capable”>
IOS中Safari頂端狀態條樣式：
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略將數字變為電話號碼：
<meta content="telephone=no" name="format-detection">
一般情況下，IOS和Android系統都會默認某長度內的數字為電話號碼，即使不加也是會默認顯示為電話的，so，取消這個很有必要！
IOS中Safari設置保存到桌面圖標：
這是IOS中Safari特有的meta，是在你保存某個頁面到桌面的時候使用這張圖作為桌面圖標，so，尺寸和iphone上的一致，是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
CSS屬性box-flex
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;}
ul li{-webkit-box-flex: 1;}
box-flex用法實例2：
<div class="demo02">
<input placeholder="百分百宽度输入框" type="text">
</div>
<style type=”text/css”> .demo02{display: -webkit-box;} .demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;} </style>
關閉Input鍵盤默認首字母大寫
autocapitalize=”off”