移动端Web

TIP

最后更新时间:2019年08月19日

字数:6217

人和人之间的差距,很多时候都在于那些背后默默付出的努力。时间是公平的,它给每一个努力的人应有的赏赐,也给每一个虚度的人该得的惩罚。

屏幕和分辨率

屏幕尺寸

直观上讲就是屏幕的大小,所谓的尺寸是对角线的长度,单位英寸(inch)

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

我们平时说所的5.0寸手机大小,其实就是手机对角线长度是12.7厘米

像素

计算机显示设备中的最小单位,即一个像素点的大小

像素是相对长度单位,在屏幕分辨率越高的设备,像素点越小,屏幕分辨率越低,像素点越大

物理像素

  • 物理像素其实就是设备像素,英文:DP(device pixels)

  • 我们常说的1920×1080像素分辨率就是用的设备像素单位

  • 显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像

  • 屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位pt

设备像素(DP)

设备像素就是物理像素

逻辑像素(DIP)

  • 逻辑像素也成为设备独立像素
  • 设备独立像素是与设备无关的逻辑像素
  • 英文:Device independent Pixel 简称dip

设备独立像素

逻辑像素也称为设备独立像素

TIP

设备独立像素不同设备上的单位:

  • iOS:PT
  • Android:DP
  • CSS:PX

CSS像素

  • 适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在
  • CSS像素就可以看做是设备的独立像素,通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素

TIP

CSS像素 = 设备独立像素 = 逻辑像素

屏幕分辨率

  • 分辨率则一般用像素来度量,表示屏幕水平和垂直方向的像素数
  • 例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成
  • 分辨率越高,图像越清晰

像素密度(PPI)

  • ppi (pixel per inch)

  • 每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况

  • PPI数值越高,说明屏幕能以更高密度显示图像

TIP

ppi越高,每英寸像素点越多,图像越清晰;

ppi越高,单位面积的像素越多

DPI

  • 每英寸像素点,印刷行业术语
  • 对于电脑屏幕而言和PPI是一个意思

设备像素比(DPR)

  • 设备像素比dpr 描述的是:未缩放状态下,物理像素CSS像素的初始比例关系
  • 设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素
DPI = 设备像素 / CSS像素(逻辑像素或设备独立像素)
1

TIP

  • 当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素
  • 当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素
  • 当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素

1PX问题

  • 在CSS中一般使用px作为单位,但是CSS中的1px并不等于设备的1px(设备的1个物理(设备)像素)
  • 在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成一个错觉,那就是CSS中的像素就是设备的物理像素。
  • 但实际情况却并非如此,CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的设备物理像素是不同的
  • 在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320*480,在iphone3上,1个CSS像素确实是等于1个物理像素的
  • 后来随着技术的发展,移动设备的像素越来越高,从iphone4开始,推出了所谓的Retina屏,分辨率提高了一倍,变成640*960,但屏幕尺寸却没变化
  • 这就意味着同样大小的屏幕上,像素却多了一倍,这时,1个CSS像素是等于4个物理像素的

实现真正的1px

  • 视口viewport中的initial-scale = 1时,页面正常
  • 当initial-scale = 0.5时,页面被缩小了1倍,像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度,缩小后的1个CSS像素宽度就只占1个物理像素,即实现了真正的1物理像素

TIP

屏幕能够显示的最小粒度是1个物理像素,但是设备像素比DPR等于2的时候,其实1px实际显示的是4个物力像素

我们可以通过修改视口viewport,实现比我们平时写的1px更小的视觉效果,比如边框1px,可以做到更小

移动端1px问题

产生的原因

  • 在CSS中一般使用px作为单位,但是CSS中的1px并不等于设备的1px(设备的1个物理(设备)像素)
  • 在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成一个错觉,那就是CSS中的像素就是设备的物理像素。
  • 但实际情况却并非如此,CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的设备物理像素是不同的
  • 在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320*480,在iphone3上,1个CSS像素确实是等于1个物理像素的
  • 后来随着技术的发展,移动设备的像素越来越高,从iphone4开始,推出了所谓的Retina屏,分辨率提高了一倍,变成640*960,但屏幕尺寸却没变化
  • 这就意味着同样大小的屏幕上,像素却多了一倍,这时,1个CSS像素是等于4个物理像素的

造成的结果

  • 当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素,也就是1px,对应一个物理像素
  • 当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素,也就是1px,对应4个物理像素
  • 当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素,也就是1px,对应9个物理像素

解决方案

建议

  • 用小数来写px值
    • IOS8下已经支持带小数的px值,
    • media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
1
2
3
4
5
6
7

有兼容问题,Android和低版本iOS不支持!!!建议不采用,面试的时候装X一波即可!

  • border-image(用图片代替边框,图片宽度可以我们自己控制)
  • background-image 渐变实现
  • box-shadow:利用阴影也可以实现,优点是没有圆角问题,缺点是颜色不好控制
  • viewport + remflexible.js
    • 视口viewport中的initial-scale = 1时,页面正常
    • 当initial-scale = 0.5时,页面被缩小了1倍,像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度,缩小后的1个CSS像素宽度就只占1个物理像素,即实现了真正的1物理像素

完整设备信息查询网址

苹果全系列设备各种信息查询网址,包含:屏幕尺寸,分辨率,CPU信息,内存,PPI,系统版本等

资料网址

视口viewport

  • 而最后说一下,我们在移动端页面开发中尝试用到元信息配置<meta name="viewport" width="device-width">,添加这段代码后我们发现之前缩放的页面被放大了

    其实它的含义就是将视口设置为:CSS像素=设备像素,即我们在页面中设置的1个CSS像素大小就等价于1个设备像素大小,在PC上看不到效果,但在移动端页面开发中我们就能看到很大的差异