【移動端開發】移動端開發基礎問題

_MindSet發表於2020-11-26

一、螢幕相關

1、螢幕尺寸

螢幕的對角線的長度，單位是英寸，常見的手機螢幕大小有： 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等。
在這裡插入圖片描述

2、螢幕解析度

螢幕出廠後，螢幕水平和垂直方向的固定畫素點數。
例如： IPhone 6 的螢幕解析度為 750 * 1334。
顯示解析度指的是裝置當前所用到的物理畫素點數，螢幕解析度 >= 顯示解析度。

3、螢幕密度

ppi/dpi 是指螢幕上每英寸裡包含的物理畫素點個數。
在這裡插入圖片描述

二、畫素相關

1、物理畫素

裝置出廠後的每一個畫素點，類似一個小燈泡，由螢幕製造商決定，螢幕生產後無法修改。
在這裡插入圖片描述

2、css畫素

程式設計師寫的，抽象長度單位，單位px，用來精確度量web頁面上內容大小。

3、裝置獨立畫素

裝置出廠後的固定引數。
可以認為是計算機座標中的一個點，由相關係統轉化為物理畫素。
有了高清屏後1個css畫素和1個物理畫素就不在是1:1的關係了。

引言： 在沒出現【高清屏】的年代，1個css畫素對應1個物理畫素，但自從【高清屏】問世，二者就不再是1對1的關係了。蘋果公司在2010年推出了一種新的顯示標準：在螢幕尺寸不變的前提下，把更多的物理畫素點壓縮至一塊螢幕裡，這樣解析度就會更高，顯示效果就會更佳細膩。蘋果將這種螢幕稱為：Retina 螢幕（又名：視網膜螢幕），與此同時推出了配備這種螢幕的劃時代數碼產品——iPhone4。

對比：iPhone3G/S 與 iPhone4的成像效果：


在這裡插入圖片描述
與物理畫素關係
普通螢幕下 1 個裝置獨立畫素 對應 1 個物理畫素
高清螢幕下 1 個裝置獨立畫素 對應 N 個物理畫素

與css畫素關係
在無縮放的情況下（標準情況）：1css畫素 = 1裝置獨立畫素

4、畫素比

單一方向上裝置【物理畫素】和【裝置獨立畫素】的比例。

window.devicePixelRatio
型號解析度（物理畫素點總和）裝置獨立畫素(dip或dp)畫素比(dpr)
IPhone 3GS320 * 480320 * 4801
IPhone 4 / 4s640 * 960320 * 4802
IPhone 5 / 5s640 * 1136320 * 5682
IPhone 6 / 7 / 8750 * 1334375 * 6672
IPhone 6p / 7p / 8p1242 x 2208414 * 7363
IPhone X1125 * 2436375 * 8123
HUAWEI P101080 x 1920360 x 6403

5、畫素之間的關係

在不考慮縮放的情況下（理想狀態下）：
​ 普通屏(dpr = 1)：1css畫素 = 1裝置獨立畫素 = 1物理畫素
​ 高清屏(dpr = 2)：1css畫素 = 1裝置獨立畫素 = 2物理畫素
​ 高清屏(dpr = 3)：1css畫素 = 1裝置獨立畫素 = 3物理畫素

三、圖片高清顯示

點陣圖：由畫素組成，放大後會失真。
向量圖：有程式碼計算得來，不會失真。

點陣圖放大失真原因：
一個點陣圖被多個物理畫素渲染。

解決辦法:
1個點陣圖畫素對應1個物理畫素。

// 藉助媒體查詢 
#demo {
    width: 200px;
    height: 200px;
    background-size: 100%;
    background-image: url('./imgs/logo.png');
  }

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #demo {
      background-image: url('./imgs/logo@2x.png');
    }
}

四、視口相關

1、pc端視口

document.documentElement.clientWidth

2、移動端視口

（1）佈局視口

移動端佈局視口預設都是980px，佈局視口的寬度決定了盒子想要沾滿螢幕應該寫多寬。
在這裡插入圖片描述

（2）視覺視口

使用者可見的區域，它的絕對寬度永遠和裝置螢幕一樣寬。
在這裡插入圖片描述

//部分瀏覽器看不到，一般也不通過程式碼看
window.innerWidth
（3）理想視口

佈局視口=裝置寬度
移動端解決方案：開啟理想視口、移動端單獨設定一套頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

五、縮放

1、 PC 端

放大時

  • 視口變小
  • 元素的 css 畫素值不變，但一個css畫素所佔面積變大了。

縮小時

  • 視口變大
  • 元素的 css 畫素值不變，但一個css畫素所佔面積變小了。

2、 移動端

放大時

  • 佈局視口不變
  • 視覺視口變小

縮小時

  • 佈局視口不變
  • 視覺視口變大

注意：移動端縮放不會影響頁面佈局，因為縮放的時候，佈局視口視口沒有變化。

相關文章