移動web開發中螢幕適配問題

標籤：cal   initial   mini   模擬器   像素   網頁   tab   單位   meta   

1、首先螢幕的尺寸就是螢幕對角線的長度 尺寸是固定的2、開發中遇到的單位 相對單位（即相對於螢幕）：px em pt 絕對單位（固定的大小，與裝置螢幕無關）：in cm3、像素密度 像素密度指的是1英寸裡面的像素的數量，比如1英寸裡面是10px，通常有兩種163（3gs） 330（4s）通常超過320的像素密度就是高清屏，計算方式：螢幕的解析度高的平方+螢幕解析度寬的平方 ，然後再開根號，再除以螢幕的英寸。4、裝置獨立像素 裝置獨立像素表示真實像素和解析度像素的一個比例，比如3gs手機高度480px，寬度320px解析度，真實裝置高度480px，寬度320px，即解析度和真實像素一樣的時候1pt = 1px；但是有一些裝置高度960px，寬度640px，解析度。真實裝置高度480px，寬度320px，即解析度是2倍的真實像素一樣的時候，1pt = 2px。5、物理像素和css像素 1、物理像素（解析度的像素）960*640 2、css像素（真實像素）模擬器裡面看見的320*5686、視口 1、視口：瀏覽器的可視寬口在PC端是會受到瀏覽器視窗的變化而變化的 2、視口在pc端是可視視窗（會變的），在移動端會有一個固定的值，但通常預設980； 3、但是預設移動端的時候980會造成網頁縮放或者出捲軸 4、解決移動端預設視口會造成網頁縮放和捲軸，設定meta標籤設定預設是視口的寬度等於裝置的寬度 5、視口的其他屬性初始化縮放initial-scale=1.0是否允許使用者縮放user-scaleable=no，最大maximum-scale=1.0；和最小縮放minimum-scale=1.0； 6、meta：vp + tab 凡是寫移動端頁面，一開始就應該加上視口。

移動web開發中螢幕適配問題