系統型別相容->ios/安卓(廠商)/微軟->js 可以判斷(嗅探功能)
系統版本相容->ios10/11/12+(低版本不考慮)
裝置相容(4/5/6/x/pluspad等)->螢幕解析度/尺寸相容 rem/media/bs/flexible.js(手機**團隊)瀏覽器版本相容->qq 瀏覽器哪個版本(低版本不考慮)
解析度相容/適配->flex 布局->相容性最好
通過響應式或者頁面終端判斷去實現一套資源適配所有終端
通過終端判斷分別調取兩套資源以適配所有終端(推薦的玩法)
css 畫素與裝置畫素：二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。
window.devicepixelratio=1||2||3 裝置畫素比
視口：移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為我們為頁面定義的用於瀏覽器渲染的大小。
**查詢：@media 找準斷點。
響應式布局：當上下文環境發生變化時可考慮變化布局來展現優雅。當元素脫離文件流絕對定位時，才是相對高度定義的。
響應式字型：font-face 絕對會對**產生巨大的影響。當容器中定義字型單位為 em 時要注意繼承性，例如：當我們定義某個塊級元素的」font-size：1.5em; line-height: 2em;」時，line-height 的實際行高為 1.5em*2 即 3em。
文件宣告：文件宣告建議用 html5 的：，它指示瀏覽器關於頁面使用哪個 html 版本進行編寫的指令。同時需要定義文件的視口資訊，如：width=device-width 告訴瀏覽器渲染該頁面的寬度等於裝置寬度，initial-scale=1 告訴瀏覽器初始化縮放的比例 1:1，user-scalable=no 禁止使用者縮放頁面。
相容性測試:
總結：
更傾向於各司其職思路清晰的第二種方案，我們可根據不同終端做不同的互動設計、視覺設計，研究不同的前端技術、使用者體驗，適合的才是更好的。
硬體
軟體
技術
網路
問題-08-移動端相容-04-相容性測試定義
問題相容人力不足->無法在規定時間內覆蓋全部場景->保證重點場景和重點機型->未覆蓋的機型要有風險標註
花錢->xx 雲測平台->覆蓋度夠(多個機型)->粒度不夠
沒錢->自己做: 梳理重點機型->抽樣覆蓋保證市場上 90%的使用者相容 場景
移動端相容
1.ios上click點選事件會有300ms的延遲響應 換用zepto的touch模組，tap事件也是為了解決在click的延遲問題 2.一些情況下對非可點選元素如 label,span 監聽click時間，ios下不會觸發 css增加cursor poiner就搞定了 3.移動端頁面滾動滯澀感 c...
移動端相容
第一次接觸移動端開發，發現web端和移動端的差別還是很大的，我主要記錄移動端的一些內容 純粹是個人看法。在web端是盡可能地展示豐富的功能，並且較為複雜，乙個頁面可以包含很多的內容。當然在互動方面也是相對複雜些，一般不是直接把 下一步 放在使用者面前，而是讓使用者自己去找。而移動端設計應以簡約為主,...
移動端部分相容問題總結
1 h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 部分安卓手機的uc瀏覽器寫完以後還是可以放大縮小 2 忽略將頁面中的數字識別為 號碼 ios上會明顯 有時候會把數字當成 號碼 3 忽略android平台中對郵箱位址的識別 4 viewport模板 5 webkit表單元素的預設外觀怎麼重置...