导语:移动Web开发自然要从Viewport说起,那什么是Viewport呢?字面意思为视图窗口,在移动设备上就是指用来显示页面的那部分区域。
用移动设备来访问没有做特殊处理的PC页面,移动设备是显示不下那么宽的内容的,所以移动设备一般会将页面缩小来显示整个页面,用户可以将页面放在来看清楚内容,在做移动Web开发的时候,我们可以手动的设置页面的视窗宽度,页面缩放比例以及是否允许用户缩放等,那具体我们该怎么设置Viewport呢?我们先来了解移动Web开发的其他几个概念。
设备像素
对于设备来说,有两个设备像素:物理像素和独立像素。
物理像素:
设备的物理像素是指在设备屏幕上显示的最小的单元,也就是屏幕分辨率,比如iPhone 6的分辨率是750像素*1334像素。每个物理像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
独立像素:
设备独立像素又称CSS像素,这是一个抽象的概念,是指Web编程中的逻辑像素。如iPhone 6的CSS像素是375像素*667像素,可以看出来,这刚好是物理像素的一半,他们之间的关系后面会讲到。也就是说,如果我们在css代码中设置某个div的宽度为375px,在iPhone 6竖屏情况下,刚好能占满屏幕宽度。
像素密度(PPI)
每英寸像素(英语:Pixels Per Inch,缩写:PPI),又被称为像素密度,是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器,电视机和手持电子设备屏幕的精细程度。通常情况下,每英寸像素值越高,屏幕能显示的图像也越精细。
有研究表明,人类肉眼能够分辨的最高像素点密度是300每英寸像素。[1]超过300每英寸像素的屏幕被常常称为Retina显示屏,这个概念最早由苹果公司于2010年推出iPhone 4手机的时候提出。
屏幕PPI计算公式:
要计算显示器的每英寸像素值,首先要确定屏幕的尺寸和分辨率。
其中,
- dp为屏幕对角线的分辨率
- wp为屏幕横向分辨率
- hp为屏幕纵向分辨率
- di为屏幕对角线的长度(单位为英寸)
以屏幕尺寸为4吋的iPhone 5为例,分辨率为1136x640,像素密度为326PPI。而分辨率为1920x1080的家用21.5寸显示