移动端开发系列 (一)—— 像素与viewport

目录

1、移动端开发的基本观点
2、像素基础知识
3、viewport原理解析
4、弹性布局
5、响应式设计
6、1rem的运用
7、移动端的事件
8、zepto库的使用

一、移动端开发的基本观点

移动端开发就是手机端开发吗?首先回答是否定的,移动端是一个大的范畴,应该包括智能手机以及平板电脑在内的所有移动设备,但主要是这两者。

二、像素基础知识

2.1、设备像素
设备像素(Device Pixels):设备屏幕的物理像素,设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。

2.2、CSS像素
CSS像素(CSS Pixels):是Web编程的概念,指的是CSS样式代码中使用的逻辑像素。

所以,1个CSS像素在不同设备上可能对应不同的物理像素,这个比值是 是设备的属性(Device Pixel Ratio,设备像素比)。

在CSS规范中,长度单位可以分为绝对单位和相对单位。px是一个相对单位,相对的是设备像素(Device Pixels)。

比如iPhone5使用的是Retina视网膜屏幕,用2x2px的Device Pixel代表1x1px的CSS Pixel,所以设备像素数为640x1136px,而CSS逻辑像素数为320x568px

CSS像素和设备像素关系

为了更清晰的理解设备像素和CSS像素,接下来的两幅图说明了当用户缩放的时候会发生什么。

第一幅图展示的是当用户进行缩小操作的时候设备像素(深蓝色背景)和CSS像素(半透明前景)的样子。CSS像素变得小了;一个设备像素覆盖了多个CSS像素。


缩小操作

第二幅图展示的当用户进行放大操作时候设备像素和CSS像素的样子。一个CSS像素现在覆盖了多个设备像素。


放大操作

2.3、分辨率
分辨率(Resolution)也是一个物理概念,含义要看对谁。

对于屏幕,分辨率一般表示屏幕上显示的物理像素总和。比如,我们说iPhone6屏幕分辨率是750x1334px

对于图像,概念等同于图像尺寸、图像大小、像素尺寸等等。比如,我们说20x20px的icon。

其实严格来说,图像分辨率的单位是ppi(Pixels Per Inch),对于一个图片文件,其像素尺寸是一定的,可能含有来自相机的meta信息,比如分辨率200ppi,该值只是个建议值,图片显示出来我们看到的尺寸由屏幕像素密度决定,像素密度越高,图片看起来越小。

2.4、设备像素比
设备像素比缩写为DPR或者DPPX,如下:

  • Device Pixel Ratio: Number of device pixels per CSS Pixel
  • Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).

设备像素比表示1个CSS像素(宽度)等于几个物理像素(宽度):

DPR = 物理像素数 / 逻辑像素数

比如dpr=2时,1个CSS像素由4个物理像素点组成。

DPR不是单位,而是一个属性名,比如在浏览器中通过window.devicePixelRatio获取屏幕的DPR

2.5、像素密度
像素密度也叫显示密度或者屏幕密度,缩写为DPI(Dots Per Inch)或者PPI(Pixel Per Inch),含义相同

专业的一般说PPI,细微差异如下:

ppi和dpi(每英寸点数)。从技术角度说,“像素”(p)只存在于计算机显示领域,而“点”(d)只出现于打印或印刷领域。

经常看到相同尺寸的屏幕像素尺寸却不同,也就是DPI的差异,比如4.7英寸的iPhone6像素尺寸为750x1334px,而4.7英寸的HTC One像素尺寸为1080x1920px

像素密度很容易算出来,比如iPhone6的:

// 屏幕对角线的像素尺寸 / 物理尺寸(inch)
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

2.6、设备独立像素
一般指Google提出的用来适配Android海量奇怪屏幕的,Windows也有这个概念,但含义不同,IOS好像没有设备独立像素一说。

设备独立像素作为单位,一般是指Android开发中的东西,缩写为DIP(Device Independent Pixels)或者DP(Density-independent Pixels),含义完全一致

Android设备的特点是屏幕尺寸很多,因此为了显示能尽量和设备无关,提出了dip,参照的density是160。计算公式为:

// 当屏幕密度为160(单位是ppi或者dpi,一个意思)时,px === dip
px = dip * density / 160 
// 所以
dip = px * 160 / dpi

当然,这两个式子都只适用于Android设备,这个dip拿到其它地方去没什么意义。

2.7、下面就是应用了
实际开发中,设计师和前端工程师之间的协同是这样的:
一般由设计师按照设备像素(Device Pixel)为单位制作设计稿。
前端工程师,参照相关的设备像素比(Device Pixel Ratio),进行换算以及编码。

我们就拿iPhone 6s来说:


iPhone 6s屏幕数据

可以看到,其分辨率为1334*750px,设备尺寸为4.7英寸,可以计算出ppi为326,查资料得知其dpr为2,可以得到对于该设备1个CSS像素数对应4个设备像素点显示,所以iPhone 6s的虚拟像素为宽750/2=375px,高1334/2 = 667px,即虚拟分辨率为667*375px

此时,我们如果在代码中设置元素的宽高为667*375px的话,会发现它的实际尺寸就等于iPhone 6s的屏幕尺寸。

Paste_Image.png
Paste_Image.png

三、viewport原理解析

桌面上视口宽度等于浏览器宽度,但在手机上有所不同。

  • 布局视口
    手机上为了容纳为桌面浏览器设计的网站,默认布局视口宽度远大于屏幕宽度,为了让用户看到网站全貌,它会缩小网站

  • 视觉视口
    屏幕的可视区域,即物理像素尺寸

  • 理想视口
    当网站是为手机准备的时候使用。通过meta来声明。早期iPhone理想视口为320x480px

所以,在没有缩放的情况下,屏幕的CSS像素宽度其实是指理想视口的宽度,而meta标签:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

指定了布局视口=理想视口,并且禁止缩放。所以添上width=device-widthviewport meta后页面变大了(一开始页面内容小得看不清),实际上是布局视口变小了。

推荐阅读更多精彩内容