### 移動端項目常見問題
1. 1PX問題
2. 適配問題
3. 蘋果手機300ms延遲問題
4. 滾動加載數據
5. 多Tab欄頁面懶加載
6. 移動Web輸入框
2.1 字體設置成了動態大小，也應該限定最大值
2.2 動態修改HTML的font-size值，rem會隨著font-size的變化而變化
2.3 1rem = html: font-size
2.4 可以根據屏幕尺寸的大小設定@media 的尺寸參數，不過這得一個一個去設定
#### 1.移動端像素分為 設備像素和CSS像素
1.1 設備像素：設備屏幕的物理像素，對于任何來講物理像素的數量是固定的
例：iPhone 6/7/8 的設備物理像素為 750 * 1334
1.2 CSS像素 ：這是一個抽象的概念，它是為web開發者創造的
1.3 用戶在縮小或放大頁面的時候，實際上是在縮小或放大CSS像素
1.4 位圖像素：一個位圖像素對應一個物理像素，圖片才能得到完美清晰的展示
#### 2.移動端的三個視口
1.1 布局視口： 頁面的寬度 document.documentElement.clientWidth
頁面的高度 document.documentElement.clientHeight
1.2 視覺視口： 用戶正在看到網站的區域，就是設備屏幕的CSS寬度與高度
1.3 理想視口： 將布局視口設為設備理想視口，其實也就是設為視覺視口
<meta name="viewport" content="width=device-width">
#### 3.設備像素比(DPR)
1 設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數，前提是縮放比例為 1例：iPhone的設備像素為640，理想視口像素是320px 則iPhone的設備像素比是2
2. window.devicePixelRatio || 1
#### 4.meta標簽：meta標簽的意義在于：讓布局視口等于理想視口
```<meta name="viewport"
content="width=device-width, initial-scale=1.0,
inimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
1. 設置布局視口寬度等于設備理想寬度
2. 設置頁面的初始縮放程度
3. 設置頁面最小縮放程度
4. 設置頁面最大縮放程度
5. 是否允許用戶對頁面進行縮放操作
#### 5.媒體查詢是響應式設計的基礎
1.1 @media all (min-width: 320px) and (max-width: 400px) { .box: { color: red } }
在所有設備上當布局視口寬度大于等于320時并且小于等于400時，應用相應的樣式
1.2 @media screen (min-width: 320px)
在屏幕設備上當布局視口寬度大于等于320時，應用相應的樣式
#### 6. 初步解決方案
1.1 根據屏幕尺寸動態設置HTML的font-size
1.2 document.querySelector('html').fontSize = documet.docuemtElement.clientWidth / 10 + 'px'
1.3 封裝SCSS函數：@return $px / 75 * 1rem，75 || 64 根據設計稿來定
#### 7. 高清屏和普通屏的區別：相同區域的物理像素點數不同
1. 1英寸 = 2.54厘米 1寸 = 3.33厘米
2. 像素：即一個小方塊，它具有特定的位置與顏色
3. 圖片、電子屏幕( 手機、電腦 )就是由無數個具有特定顏色和特定位置的小方塊拼接而成的
4. 分辨率一般分為圖片分辨率和屏幕分辨率
5. PPI：每英寸包含的像素數量
1. 像 iphone XS Max 和 iphone SE 的PPI分別為 458 和 326，前者的屏幕清晰度更高
6. DPI：每英寸包括的點數
1. 使用DPI來描述圖片和屏幕時，這時的DPI和PPI是等價的
2. DPI最常見的是用來描述打印機，表示打印機每英寸可以打印的點數
7. 圖像分辨率：800 * 400 ：表示垂直和水平上的像素點為 800 * 400
#### 滑動事件
1. 手動滑、通過函數觸發滑動、慣性滑動
