#### 概念
物理像素：設備像素，代表著手機屏幕上有多少個小格子
設備獨立像素：css中的1px，經轉換變成物理像素
設備像素比：物理/設備獨立（dpr）
一般屏下1獨立等于1物理，而高清下（2）1獨立等于4物理。
以iphone6為例，1px原本對應1物理，在iphone6下1px對應4物理，我們在css里設置的1px到iphone上并不是1px，而是2px，因此可以用initial-scale將頁面縮小一倍，讓1px真正等于1px。
#### 1px像素問題
剛剛說了，高清屏下的css1px最終在手機上并不是1px，我們可以通過initial-scale=0.5或者利用css3的transform:scale(0.5)解決。
flexible的原理
```
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
}
else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; }
else { dpr = 1; }
}
else {
// 其他設備下，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
```
```
var metaEl = doc.createElement('meta');
var scale = 1 / dpr;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
```
```
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
```
#### 關于font-size
字體不用rem，而是根據像素比調整
```
//data-dpr屬性是flexible自己在html中添加的屬性
font-size: 10px;
[data-dpr="2"] { font-size: 20px; }
[data-dpr="3"] { font-size: 30px; }
```
#### 兼容性問題
ios上滾動卡頓（手指離開時立即停止了滾動）：
可以設置 -webkit-overflow-scrolling： touch，但是在ios上存在bug（底部fixed與內容黏動）
```
//解決方案
<body>
<div id="top">固定在頂部</div>
<div id="content">中間內容帶滾動條</div>
<div id="bottom">固定在底部</div>
</body>
#header{
width: 100%;
height: 50px;
background-color: red;
position: fixed;
top: 0;
}
#footer{
width: 100%;
height: 50px;
background-color: red;
position: fixed;
bottom: 0;
}
#content {
margin: 50px 0;
}
body {
-webkit-overflow-scrolling:touch
}
!!content不設置高度，內容自己撐開
```
彈出層出現后阻止外層滾動，一般的做法是body為overflow:hidden，之后visible。但是在手機端是無效的。
```
//解決方案，將想要阻止的滾動層設為fixed，并且記錄其當前的滾動位置，彈框關閉后重置為static并滾動到剛剛記錄的位置
this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
document.body.style.position='fixed';
document.body.style.top=-this.scrollTop+'px';
document.body.style.position='';
document.body.style.top='';
document.body.scrollTop = document.documentElement.scrollTop = this.scrollTop;
```
```
<input type="file" accept="image/*" capture="camera" multiple/>在ios上直接打開相機，在安卓上可以選擇圖片或打開相機
<input type="file" accept="image/*" multiple/>在ios上可以選擇圖片或打開相機，在安卓上沒有相機選項
```
點擊bug：
在iOS中，當委托給一個元素添加click事件時，如果事件是委托到 document 或 body 上，并且委托的元素是默認不可點擊的(如 div, span 等)，此時 click 事件會失效。
```
//解決方案
將 click 元素委托到非 document 或 body 的父級元素上
```
ios click 300ms延遲：
原因是為了區分究竟是點擊事件還是雙擊事件
```
//解決方案
//1和2在safari上均不可以，因此還要禁用雙擊滾動
1. <meta name="viewport" content="user-scalable=no">
2. <meta name="viewport" content="width=device-width">
3. fastclick庫：FastClick 在檢測到 touchend 事件的時候，會通過 DOM 自定義事件立即觸發一個模擬click 事件，并把瀏覽器在 300 毫秒之后真正觸發的 click 事件阻止掉。
```
iphone和ipad上input框默認有內陰影：
-webkit-appearance:none;
ios輸入框默認首字母大寫：
<input type="text"autocapitalize="off"/>
