html5 移動端-2

為什麼使用移動端适配

1. 随着時代的發展，在移動端通路pc端的頁面，逐漸常态化；
2. 手機的尺寸，碎片化越來越嚴重，碎片化：五花八門，種類繁多

布局視口：就是整個頁面的布局一般都是浏覽器廠商給定的固定值

視覺視口：浏覽器可視區域的大小，也就是使用者可以通過裝置寬度看到的内容。

理想視口：布局視口雖然解決了移動端檢視pc端網頁的問題，但是完全忽略了使用者手機本身的尺寸所有蘋果公司引入了理想視口，他對裝置來說最理想的，布局視口使用者不需要對頁面進行縮放就可以完美展現，最簡單的做法就是使布局視口的寬度改成螢幕的寬度。

兩個像素

css像素：（獨立像素，邏輯像素）在css中使用的長度機關px，在pc端1實體像素等于1px 但是在移動端1實體像素不等于1px；

實體像素：螢幕的實體像素，又被成為裝置像素，他是顯示裝置中， 一個最微小的實體部件。任何裝置的實體像素出廠的時候就确定了，且固定不變裝置像素比 :簡稱為dpr，他是實體像素 和獨立像素的對應關系(也即是比例)

備注:判斷是否為高清時，看一下dpr的值是否大于1，一般情況下dpr為整數但是一些安卓的機型不為整數：通過window.devicePixelRatio獲得

<script type="text/javascript">
        console.log(window.devicePixelRatio)
   </script>
           

移動端的測試方法

1. 谷歌浏覽器提供的虛拟機
2. 電腦和手機在同一區域網路内掃描編譯器提供的二維碼
3. 搭建本地伺服器，來建立通路

meat标簽：告訴浏覽器的設定資訊（必須和上面分開寫），理想視口的重要元素，主要用于将布局視口的尺寸和理想視口尺寸比對。

meat視口标簽的5個指令；

width設定布局視口的寬度，一般都是device-width(裝置庫寬)

initial-scale:初始比例1為100%；2為200% …

minmum-scale：最大縮放比例

maxmun-scale：最小縮放比例

user-scalable：是否允許使用者縮放

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
           

寫移動端必須帶viewport