移動互聯(lián)網(wǎng)發(fā)展的如火如荼，這對前端工程師要求就更高了岩饼，移動端適配也就成為了重要的問題之一。先說一下涉及到的基本的概念：
1.
devicePixelRatio（設備像素比通過window.devicePixelRatio獲取，可以=物理像素 / 獨立像素=設備像素/CSS像素俯萎；可以說物理像素=設備像素凉袱；CSS像素是獨立像素芥吟；
2.屏幕密度是指一個設備表面上存在的像素數(shù)量侦铜，它通常以每英寸有多少像素來計算
3.Retina屏幕：根據(jù)蘋果發(fā)布產(chǎn)品的定義：PPI高于210（筆記本電腦）、260（平板電腦）钟鸵、300（手機）的屏幕都稱為Retina屏幕
4.px 適用于pc端钉稍，1px等于1個邏輯像素
5.em是相對于父元素下的font-size而言的，大面積使用em會比較混亂
6.rem根據(jù)html下的font-size的大小來定1rem的大小棺耍，是個相對單位贡未，比如font-size：100px；那嗎1rem=100px
7.initial-scale蒙袍，初始的縮放比例
8.minimum-scale俊卤，允許用戶縮放到的最小比例；
9.maximum-scale害幅，允許用戶縮放到的最大比例消恍；
10.user-scalable，用戶是否可以手動縮放以现；
ios的一些必備
1.啟用 WebApp 全屏模式狠怨，刪除蘋果默認的工具欄和菜單欄:
<meta name="apple-mobile-web-app-capable" content="yes"/>
2.如果把一個web app添加到了主屏幕中，那么從主屏幕中打開這個web app則全屏顯示:<meta content="yes" name="apple-touch-fullscreen" />
3.iphone,itouch圖標邑遏，默認 57x57 像素取董，ipad是72*72；ipad3對應144×144的高分辨率无宿；必須有<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
4.Retina iPhone 和 Retina iTouch茵汰，114x114 像素，可以沒有孽鸡，但推薦有<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
5.ios啟動畫面<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
6image.png
- viewport-fit蹂午；iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現(xiàn)有 viewport meta 標簽的一個擴展彬碱，用于設置網(wǎng)頁在可視窗口的布局方式豆胸，可設置三個值
contain: 可視窗口完全包含網(wǎng)頁內(nèi)容
cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口
auto：默認值，跟 contain 表現(xiàn)一致
iOS11 新增特性巷疼，Webkit 的一個 CSS 函數(shù)晚胡，用于設定安全區(qū)域與邊界的距離，有四個預定義的變量
safe-area-inset-top 安全區(qū)域距離上邊邊界距離
safe-area-inset-right 安全區(qū)域距離右邊邊界距離
safe-area-inset-bottom 安全區(qū)域距離底邊邊界距離
safe-area-inset-left 安全區(qū)域距離左邊邊界距離
meta常用標簽
1.搜索引擎抓取
<meta name="robots" content="index,follow"/>
2.為移動設備添加viewport<meta name="viewport" content="..........">
3.主屏標題,ios6新增加<meta name="apple-mobile-web-app-title" content="標題">
4.是否使用webapp模式嚼沿，刪除蘋果的菜單欄和工具欄<meta name="apple-mobile-web-app-capable" content="yes"/>
5.設置蘋果工具欄顏色<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
6.不讓頁面中的數(shù)字識別為電話或者email<meta name="format-detection" content="telphone=no, email=no"/>
7.qq強制豎屏<meta name="x5-orientation" content="portrait">
8.uc強制豎屏<meta name="screen-orientation" content="portrait">
9.uc強制全屏<meta name="screen-orientation" content="yes">
10.qq強制全屏<meta name="x5-fullscreen" content="true">
移動端適配的方案最火的一個庫是淘寶的Flexible,看Flexible庫主要做的事情：
（不過現(xiàn)在有的都使用vw和vh來做移動端適配了）
1.判斷頁面有沒有
meta[name="viewport"]和meta[name="flexible"]如果有就根據(jù)具體viewport和flexible里面的具體內(nèi)容計算出 scale和dpr估盘；dpr主要是為了不同像素比屏幕下顯示文字用的，而 scale是為了解決 1px的線過于粗的問題骡尽。
2.如果沒有viewport和flexible就根據(jù)win.devicePixelRatio來計算出scale和dpr,這里需要判斷下是android還是iphone;然后設置data-dpr屬性遣妥，值是dpr；然后再創(chuàng)建出meta-viewport
3.還有個功能是根據(jù)頁面的寬度docEl.getBoundingClientRect().width實時設置更新html下的font-size的值攀细，當然rem也就隨之更新了
4.還有一點：監(jiān)聽resize和pageshow箫踩，隨時更新rem爱态；
5.還有一點： 通過判斷ajax加載數(shù)據(jù)完成Document.readyState 和dom樹加載完成DOMContentLoaded來隨時更新body下的fontSize；
6.還有px2rem和em2px兩個函數(shù)進行px和rem的轉換境钟；
7.這里涉及到540px锦担；因為iphone6Plus也就414px；大于540基本是ipad設備了慨削；
flexible缺陷
1.針對iphone做了些適配吆豹；所有安卓設備dpr都是1，很多 Android高清屏下頁面圖片會不清晰
2.不是純css的移動適配方案理盆，需要引入js文件;
3.不支持響應式設計方案痘煤，響應式設計需要用到css3媒體查詢，根據(jù)查詢到的設備寬度使用不同的css樣式猿规。而引入flexible的頁面會根據(jù)dpr進行縮放衷快，css3媒體查詢得到的是縮放前的寬度而不是縮放后的寬度。
4.會涉及到小數(shù)問題姨俩，不是很精確蘸拔；
