移动前端适配—逻辑像素和物理像素

seasonley 发布于2019-08-01 17:46 / 2788人阅读

摘要：物理像素移动设备出厂时，就具备的分辨率，小米逻辑像素当你在设置了，那么页面就会以移动设备的作为逻辑像素。但是的逻辑像素只是小米的，不同手机之间存在差异性，为了让所有手机上面的图片较为正常的显示，那么应该选取一个物理像素较高的图片。

基础概念 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物理像素前端绘制像素物理备份和逻辑备份物理备份和逻辑备份区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51361.html

移动前端适配—逻辑像素和物理像素

摘要：物理像素移动设备出厂时，就具备的分辨率，小米逻辑像素当你在设置了，那么页面就会以移动设备的作为逻辑像素。但是的逻辑像素只是小米的，不同手机之间存在差异性，为了让所有手机上面的图片较为正常的显示，那么应该选取一个物理像素较高的图片。基础概念 dpi 每英寸所含有的像素点的个数。物理像素移动设备出厂时，就具备的分辨率，小米5 1920x1080 iphone6 1334x750 逻...

mo0n1andin 2019-08-30 13:45 评论0 收藏0
移动前端适配—逻辑像素和物理像素

摘要：物理像素移动设备出厂时，就具备的分辨率，小米逻辑像素当你在设置了，那么页面就会以移动设备的作为逻辑像素。但是的逻辑像素只是小米的，不同手机之间存在差异性，为了让所有手机上面的图片较为正常的显示，那么应该选取一个物理像素较高的图片。基础概念 dpi 每英寸所含有的像素点的个数。物理像素移动设备出厂时，就具备的分辨率，小米5 1920x1080 iphone6 1334x750 逻...

klivitamJ 2019-08-21 16:58 评论0 收藏0
前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；网上找不到主流android设备的数据表，就以iphone为例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6为例：竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；竖屏...

W_BinaryTree 2019-08-22 16:33 评论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