使用百分比自適應布局（流式布局）同時 設定 viewport（視口）即可達到適配目的
流式布局：就是百分比布局，非固定畫素，內容向兩側填充，理解成流動的布局，稱為流式布局
視覺視窗：viewport，是移動端特有的，這是乙個虛擬的區域，承載網頁的，他們的關係：瀏覽器承載viewport，viewport再去承載網頁
1.網頁內容的寬度必須和瀏覽器保持一致
2.預設顯示的縮放比例和pc端保持一致（縮放比例 1.0）
3.不允許使用者自行縮放網頁
滿足以上要求，就達到了適配，稱之為國際通用適配方案
如果任何設定都沒有，預設走的就是viewport的預設設定
去設定新的viewport設定，達到適配的要求
設定視口的標籤，寫在head裡邊並且應該緊接著編碼設定
viewport的功能：
1.可以設定寬度 width （device-width 當前裝置的寬度）
2.可以設定高度 height
3.可以設定預設的縮放比例 initial-scale
4.可以設定是否允許使用者自行縮放 user-scalable
5.可以設定最大、最小縮放比例 maximum-scale minimum-scale
在content=""使用以上引數
1.width=device-width 寬度一致 比例是1.0
2.initial-scale=1.0 寬度一致，比例是1.0
3.user-scalable=no 不允許使用者自行縮放 yes no 1 0
1.頁面真實尺寸會比裝置的尺寸大上幾倍
2.假設裝置是iphone4 320px 網頁尺寸 640px
3.縮放操作有 2倍 3倍 和螢幕畫素比有關係
4.什麼是 畫素（物理畫素點） px（頁面的尺寸單位）
5.物理畫素 是裝置顯示屏的最小可視顆粒的大小
6.現在有高畫質顯示屏（視網膜螢幕、retina螢幕）
7.顯示效果就會更加細膩，但是顯示同等質量的的時候，就會產生模糊效果
8.在螢幕畫素比（乙個px可以放幾個物理畫素）高的裝置（非向量圖）顯示會模糊
9.提高網頁的清晰度 根據螢幕的畫素比來縮放網頁
10.這樣的適配方案成本非常的高
11.在一般的企業開發當中，使用的還是標準化設定
在高畫質顯示屏當中，可能會失真（模糊）
移動端適配的幾種解決辦法
原則 開發時方便，寫 時設定的值要和標註的 160px 相關 方案要適配大多數手機螢幕，並且無 bug 使用者體驗要好，頁面看著沒有不適感 思路 寫頁面時，按照設計稿寫固定寬度，最後再統一縮放處理，在不同手機上都能用 按照設計稿的標準開發頁面，在手機上部分內容根據螢幕寬度等比縮放，部分內容按需要變化...
移動端ios遇到的問題及解決辦法
1.ios下margin失效的問題 1 設定html，body為100 2 給底部div設定固定定位，top為0 3 給上乙個兄弟元素設定padding bottom，就可以解決了。2.overflow auto 在ios下出現卡頓的問題 1 給滾動的元素 設定 webkit overflow sc...
移動端 1畫素問題及解決辦法
前言 在移動端web開發中，ui設計稿中設定邊框為1畫素，前端在開發過程中如果出現border 1px，測試會發現在某些機型上，1px會比較粗，即是較經典的 移動端1px畫素問題。物理畫素 移動裝置出廠時，不同裝置自帶的不同畫素，也稱硬體畫素 邏輯畫素 就是css中的畫素 media screen ...