移动端DPR,物理像素,逻辑像素,PPI,物理尺寸


还是从具体的案例来去认识移动端中的各种定义吧。
这里写图片描述
以最常见的设计图参考iphone6来举个栗子,详细说。

4.7in2.3*4.1 in16:9375 * 667 dp750*1334px2.0 xhdpi (密度)
4.7英寸2.3(宽度)*4.1(长度) 英寸高度:宽度375*667 (points)750*1334 px2.0 xhdpi

1 iphone6的大小是4.7英寸的,计算方法是对角线的长是4.7英寸,意味着iphone6的对角线长度是4.7*2.54 = 11.938cm(约等于12厘米)

(1英寸(in)=2.54厘米(cm))

2 iphone6的手机显示的屏幕宽度是2.3英寸(5.842cm),长度是4.1英寸(10.414cm)。注意这里的长度和宽度值是显示的屏幕,因为iphone6不是全屏手机,所以还有很多不是显示的地方,而我们比较常见的iphone6的手机尺寸大小是长宽分别为138.1 mm*67.0 mm。如下图:
这里写图片描述

3 其中16:9就不用解释了,其实就是长宽的比,也就是4.1: 2.3。

4 iphone6中的逻辑分辨率是375*667,这个逻辑分辨率是通过算法所达到的。375可以理解为375个内容点,内容点才是真正用来显示内容的范围。在此之前,i5,i4都是320个内容点。

5 iphone6的物理分辨率是750*1334px,这个单位是px。

6 iphone6的缩放因子是2,其实也就是DPR的值是2。

缩放因子DPR(设备像素比)
早期的iPhone3GS的屏幕屏幕分辨率是320 * 480,这个时候的缩放因子是1倍。iOS绘制图形(CGPoint/CGSize/CGRect)均已point为单位。所以 1 point = 1 pixel

后来在iPhone4中,同样大小(3.5inch)的屏幕采用Retina(视网膜)屏幕显示技术(同样的尺寸,像素多了一倍),横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320 * 2) * (480 * 2) = 640 * 960,显像分辨率提高到iPhone3GS的4倍。iPhone6Plus中横、纵向方向像素密度都被放大到3倍,显像分辨率提高到iPhone3GS的9倍。所以1 point = 2 pixel

DPR的计算公式:

* DPR = 单位长度内(pixel/point);*

比如ipone6中的scale的值 = 750px / 375pt = 2.0

像素密度ppi
表示沿着对角线,每英寸所拥有的像素(pixel)数目,PPI的数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高,图像更清晰。图为各个值
这里写图片描述
根据勾股定理: iphone4的PPI的计算值:
这里写图片描述 = 163 pixcel/inch

总算显示总结了一部分知识后续在去补充。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动适配是指在开发移动应用或网页时,使元在不同设备上显示一致。常见的移动适配方案是基于CSS像和设备独立像的概念。 在移动设备中,设备独立像是一个虚拟像单位,可以认为是计算机坐标系中的一个点,它代表了程序使用的虚拟像。而CSS像则是网页或应用中的单位,用于定义元的大小和位置。 对于移动设备的像适配,一种常见的做法是将设计稿以750px的宽度作为基准进行适配。这意味着在CSS中,元尺寸应该按照设计稿中的尺寸进行设置,同时使用媒体查询等技术来适配不同的设备屏幕宽度。 例如,设计稿中一个元的宽度为100px,在CSS中可以设置为: width: 100px; 但是为了适配不同设备,可以使用媒体查询来调整元的样式,例如: @media screen and (max-width: 375px) { width: 50px; } 这样,在375px宽度以下的设备上,这个元的宽度会变为50px,以适应不同的屏幕尺寸。 需要注意的是,移动适配还需要考虑设备像比(DPR),即设备物理和设备独立像的比例关系。通常情况下,一个CSS像对应一个设备独立像,但在高清屏幕上,一个CSS像可能对应多个设备物理。因此,在进行移动适配时,还需要根据设备像比进行相应的调整。 总结起来,移动适配是通过使用CSS像和设备独立像的概念,结合媒体查询和设备像比来实现元在不同移动设备上的一致显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [移动概念,viewport,适配](https://blog.csdn.net/dongqian911/article/details/113955011)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值