移動前端適配—邏輯像素和物理像素

klivitamJ 發布于2019-08-21 16:58 / 2232人閱讀

摘要：物理像素移動設備出廠時，就具備的分辨率，小米邏輯像素當你在設置了，那么頁面就會以移動設備的作為邏輯像素。但是的邏輯像素只是小米的，不同手機之間存在差異性，為了讓所有手機上面的圖片較為正常的顯示，那么應該選取一個物理像素較高的圖片。

基礎概念 dpi

每英寸所含有的像素點的個數。

物理像素

移動設備出廠時，就具備的分辨率，小米5 1920x1080 iphone6 1334x750

邏輯像素

Give your page a , read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.

當你在html設置了，那么頁面就會以移動設備的dpis width作為邏輯像素。

dpis width & scale

dpis width 如何得出？

你先需要計算dpi
小米5為例， sqrt(1920² x 1080²) / 5.15(屏幕的物理尺寸) = 427.7

計算scale
scale = 427.7 / 160 約等于 3.(這個計算是針對于android手機，不過ios也類似，至少目前的機型都符合這個計算，有清楚的大佬可以告知)
android 以160的倍數作為分隔點，來劃分不同手機邏輯像素的縮放比例。
160 mdpi

320 hdpi

480 xhdpi

計算dpis width 也就是邏輯像素
dpis width = 1080 / 3 = 360

那么結論來了

開發時其實只需要考慮邏輯像素，android 中 dp單位和移動前端中的px是一樣的，ios中用的也是邏輯像素。

那么開發時，圖片我們改如何選擇呢？

1280 x 720 、1920 x 1080 、2560 x 1440,這物理分辨率不同的手機之間有什么區別？

還是以小米5為例，邏輯像素是360，那么其實對于小米5來說360px(物理像素)的圖片就可以正常顯示，并且不會拉伸，那么為了讓圖片的色彩更加好，可以使用720px(物理像素)的圖片或者是1080px(物理像素)的圖片。

但是360的邏輯像素只是小米5的，不同手機之間存在差異性，為了讓所有手機上面的圖片較為正常的顯示，那么應該選取一個物理像素較高的圖片。

android端通常在本地準備了多套的圖，根據不同scale來選擇不同的圖片，以便在所有手機上都能較好的顯示，同時保證了性能與展示效果，當然你可以選擇僅僅使用一張最大的圖，但代價便是內存占用和性能問題。

移動web端更是如此，因為移動web端的圖片通常是從服務器獲取，那么如果都統一使用最大的圖片，勢必會影響加載速度,所以根據實際使用情況，自己斟酌。

GPU云服務器云服務器 html物理像素前端繪制像素物理備份和邏輯備份物理備份和邏輯備份區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88960.html

移動前端適配—邏輯像素和物理像素

摘要：物理像素移動設備出廠時，就具備的分辨率，小米邏輯像素當你在設置了，那么頁面就會以移動設備的作為邏輯像素。但是的邏輯像素只是小米的，不同手機之間存在差異性，為了讓所有手機上面的圖片較為正常的顯示，那么應該選取一個物理像素較高的圖片。基礎概念 dpi 每英寸所含有的像素點的個數。物理像素移動設備出廠時，就具備的分辨率，小米5 1920x1080 iphone6 1334x750 邏...

mo0n1andin 2019-08-30 13:45 評論0 收藏0
移動前端適配—邏輯像素和物理像素

摘要：物理像素移動設備出廠時，就具備的分辨率，小米邏輯像素當你在設置了，那么頁面就會以移動設備的作為邏輯像素。但是的邏輯像素只是小米的，不同手機之間存在差異性，為了讓所有手機上面的圖片較為正常的顯示，那么應該選取一個物理像素較高的圖片。基礎概念 dpi 每英寸所含有的像素點的個數。物理像素移動設備出廠時，就具備的分辨率，小米5 1920x1080 iphone6 1334x750 邏...

seasonley 2019-08-01 17:46 評論0 收藏0
前端移動端適配方案之rem之小白解惑

移動端適配-rem: 認識移動端做適配方案之前先認識下移動端，熟悉移動端和pc端的區別和特點，才能真正理解做適配的精髓，這里就簡單介紹下；網上找不到主流android設備的數據表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨立像素）；豎屏...

EasonTyler 2019-08-29 15:07 評論0 收藏0