抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

了解屏幕和页面

设备的尺寸

设备的尺寸通常用(英寸)来表示,它是指设备上对角线的长度。

1英寸 = 2.54 厘米

像素

一个图像,都是由很多的像素组成的。像素是组成图像的最小单位。

设备像素和设备分辨率

设备像素也叫物理像素,就是屏幕上的真实像素点。设备像素是屏幕出厂就已经固定的,无法修改。

设备分辨率就是这个屏幕上真实像素点的数量。

比如,在购买手机时,上面显示的屏幕分辨率就是设备分辨率。下面是一款VIVO手机的设备信息:

通常说的 xP 是指纵向像素大小为 x 的屏幕。如1920*1080 属于 1080P
通常说的 xK 是指横向像素大小为 x *1024的屏幕。如 2048*1152 就属于2K。

DPI和PPI:衡量标准

随着屏幕的升级换代,现在同样的屏幕尺寸,可以具有更高的设备分辨率了。对于相同的尺寸,如果显示的像素越多,那么最后沾水处理的屏幕就越清晰。下面两种单位,就可以衡量屏幕的清晰度了:

  • DPI: 每英寸的点数,这个点数可以是屏幕像素点、图片像素点也可以是打印机的墨点
  • PPI: 每英寸的像素数

对于屏幕来说,DPI和PPI是等价的。

设备独立像素

对于同样尺寸的屏幕,设备分辨率越高,展示的像素就越多了。
但是网页中的文字,形状等通常都是以 px 为单位的,这意味着对于同样大小的屏幕,相同px单位的文字,分辨率越高,显示的文字就越小。

很明显,这不利于用户体验。

为了解决这种问题,就有了设备独立像素的概念:

设备独立像素(device independent pixels)是操作系统定义的一种像素单位,应用程序将设备独立像素告诉操作系统,操作系统再将设备独立像素转化为设备像素,从而控制屏幕上真正的物理像素点。

iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)是概念,即使用一个设备独立像素来表示多个个物理像素。这样就可以让页面显示的更加细致清晰。(如曲线)

CSS像素

当网页不进行缩放的时候,我们在CSS等位置中使用的 px 单位都是指设备独立像素。

但如果网页缩放了,那么一个CSS像素就可能会跨越更多或更少的设备独立像素。

其中CSS像素和设备独立像素的比值就是页面的缩放比例。

设备像素比

设备像素比(device pixel ratio,dpr),是指物理像素和设备独立像素的比值。

但是在CSS和JS中,设备像素比是指CSS像素和物理像素的比值。

在JS中,我们可以通过下面的属性来获取设备像素比:

1
window.devicePixelRatio

在CSS中,可以通过媒体查询结合 min-device-pixel-ratio 来设置不同的像素比。

视口(viewport)

视口就是浏览器中,网页显示的区域(不包含浏览器的UI)。

布局视口

布局视口是指页面根元素的宽高。也就说,布局视口可以通过下面的方法获取:

1
2
document.documentElement.clientWidth
document.documentElement.clientHeight

这里只讨论宽度

默认情况下,PC端的布局视口就是这个页面可以展示的CSS像素数。如果没有缩放,那么也等于设备独立像素。

对于移动端,为了保证PC端的网页能够在手机端上展示,移动端的布局视口通常被设置一个固定的值(谷歌浏览器是980px)。当用户缩放页面时,布局视口不会发生变化,而是显示滚动条。

视觉视口

视觉视口就是用户可以看到的部分,可以通过下面的方法获取:

1
2
window.innerWidth
window.innerHeight

视觉视口默认等于当前浏览器的窗口大小(含滚动条)。

在PC端中,如果用户缩放了页面,那么视觉视口就等于默认情况下的布局视口。

在移动端中,如果用户缩放了页面,那么视觉视口就会发生变化(默认情况下的布局视口/缩放比例)。

理想视口

理想视口就是网站页面在移动端展示的理想大小,其值刚好是设备独立像素。获取方式:

1
2
screen.innerWidth
screen.innerHeight

设置默认布局视口为理想视口

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

参考

  1. https://juejin.cn/post/7046169975706353701

评论