手机屏幕物理点击器是什么原理_深入浅出 Viewport 设计原理

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案。这篇文章尝试通过循序渐进的方式，逐层探索 Viewport 的设计原理，希望能给读者带来更加清晰、更加全面的技术认知。

一、引言

在PC时代，我们用 css 设置 1px 边框，显示器会用1个物理像素进行渲染。而进入移动应用时代后，我们原来设置1px边框，在手机上可能需要用 2 个或 3 个物理像素来渲染。

那么，手机为什么要这么做？解决了什么问题？以及我们开发过程中需要做什么？

下面，我们将带着这些问题来一步步探索移动端 Viewport 设计原理，以及如何利用 Viewport 进行移动端适配。

二、基础概念

1、屏幕尺寸

屏幕尺寸指的是手机屏幕对角线的长度，知道屏幕的宽度(width)和高度(height)，通过勾股定理就可以算出对角线的长度：

diagonal 就是屏幕对角线的长度，单位是毫米(mm), 然后再把这个长度换算成 “英寸(inch)”，就是我们平时所说的手机尺寸。

1 英寸等于 25.4mm，即:

比如 iPhone 的尺寸 3.5寸、4寸、4.7寸、5.5寸 就是这样计算出来的。

2、物理像素

我们在手机屏幕上看到的画面，本质上都是由一个个发光的物理像素组成，物理像素是构成屏幕图像的最小单元。

我们常说的屏幕分辨率，就是指这个屏幕上拥有多少个物理像素。

比如： iPhone4 的分辨率是 640 × 960，即屏幕在水平方向上有 640 个像素，在垂直方向上有 960 个像素。

通常，设计师给的UI设计稿上的“px”指的就是物理像素。

3、像素密度 - PPI

PPI(Pixel Per Inch by diagonal)：表示对角线上每英寸所拥有的像素个数。

计算PPI，可以先利用勾股定理计算出对角线上的像素数，然后再除以屏幕尺寸，即：

把 iPhone 4 屏幕数据代入公式，即可得出 iPhone4 的 PPI :

PPI 的值越大，每英寸屏幕上的物理像素点就越多越密集，渲染出来的画面也更加细腻、清晰。

比如，iPhone3GS 和 iPhone4 拥有相同大小的屏幕尺寸。但前者的分辨率是 320*480，可以算出PPI为 163，而后者的分辨率是 640*960, PPI 是32