Design principles in simple terms Viewport

Viewport is to develop new HTML5 for mobile end a meta attribute, its role is to render the same page in different devices, providing responsive solutions. This article attempts by-step approach, layer by layer to explore the design principles Viewport hope to give readers a clearer and more comprehensive technical knowledge.

I. Introduction

In the PC era, we set the 1px border with css, the display will be rendered with a physical pixels. And after entering the era of mobile applications, we had set the 1px border, on the phone may need to use two or three physical pixels to render.

So, why do phone? Solve the problem? What development process and we need to do?

Below, we will take these issues step by step to explore the mobile terminal Viewport design principles, as well as how to use the Viewport mobile terminal adaptation.

Second, the basic concept

1, the screen size

Refers to the screen size of the mobile phone screen diagonal length, width know (width) and height (height) of the screen diagonal can be calculated by the Pythagorean theorem:

Then put this in terms of length "inches (inch)", is what we usually say the size of a mobile phone.

One inch equals 25.4mm, namely:

Common sizes such as iPhone 3.5-inch, 4-inch, 4.7 inch, 5.5 inch and so on.

2, physical pixel

We see on the screen the phone, are made essentially of a physical light emitting pixels, the pixel is a minimum unit constituting the physical screen image.

We often say that the screen resolution refers to the number of physical pixels on this screen has.

For example: iPhone4 resolution is 640 × 960, i.e. the screen has 640 pixels in the horizontal direction and 960 pixels in the vertical direction.

Typically, PX on a UI designer to design draft refers to the physical pixels.

3, pixel density - PPI

PPI (Pixel Per Inch by diagonal): represents the number of pixels per inch on the diagonal owned.

Calculating the PPI, may be simply calculated using the Pythagorean theorem pixels on the diagonal, the diagonal length divided by:

The iPhone 4 screen data into the formula, you can come to the PPI iPhone4:

PPI larger the value, the more physical pixels per inch on the screen the more dense, thus rendering out of the picture is also more delicate and clear.

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

这就导致 iphone4 在画面呈现上比 iphone3GS 更加清晰和细腻。

4、PPI 导致的问题

我们先看下面的两张图有什么区别？

很明细，左边的图要比右边的看着舒服。

左边的字体大小适中，图片文字都能看的清楚，相比而言，右边的字体就太小了，让用户阅读变得困难。

那么，这个问题是怎么造成的呢？

我们先来做一个对比实验，如下图所示：

左图和右图分别代表两块尺寸相同的屏幕，长度和宽度均为 5cm，屏幕上的每个方格代表一个物理像素点。

唯一不同的是，左边屏幕分辨率为5 × 5，而右边屏幕分辨率为 10 × 10 。

现在屏幕上放了一个按钮，它的 css 样式为:

.button {
  width: 3px;
  height: 1px;
}

从图上的效果可以看出，虽然我们为两个按钮设置了相同的大小，但右屏上的按钮比左屏上的按钮小了很多。

所以我们会发现，相同尺寸的屏幕，像素点越多，每个物理像素点“自身”大小就越小，从而导致渲染出来的图像就会越小。

也就是说，设置相同大小的样式，屏幕的 PPI 越大，渲染出来的图像就越小。

这其实是一个问题。

在移动时代，手机的大小和分辨率参差不齐，从而导致PPI也不尽相同。当我们把一个web页面放到PPI不同的设备上浏览时，就会出现“大小各异”的效果，违背了我们对 css 样式 “所见即所得” 的认知。

为了让同一个元素在所有设备上看起来都差不多大，设备厂商给显示屏幕增加了 “缩放因子”。

5、缩放因子 - DPR

这里的缩放因子并不是对图像本身进行缩放，而是使用更多的像素来渲染同一个元素。

如下图所示，同样大小的矩形，在第一个设备上用过了 8×1 个物理像素来渲染，而在第二个设备上用了 16×2 个物理像素来渲染，在第三个设备上则用了 24×3 个物理像素来渲染。

这样以来，同一个元素在所有设备上的显示效果都一样了！

从图上可以看出，屏幕的PPI越大，缩放因子就越大。如果以第一个屏幕为基准，这三个屏幕的缩放因子分别为： 1、2、3。

通常我们把 “缩放因子” 叫做 DPR。DPR 是 device pixel ratio 的缩写，即设备像素比。

这里需要注意的是：

dpr 的大小并不是通过固定公式计算出来的，而是厂商给屏幕设置的一个固定值，出厂时就确定了，它的大小不会随着程序的设置而改变。

6、DPR 和 PPI 的对应关系

不同平台定义 DPR 的基线 PPI 是不同的。

由于第一代 iPhone 的 PPI 是163，所以苹果把 163 作为缩放基线。

因此，在 iPhone 中， PPI=163 是1x 屏，PPI=326 是 2x 屏。

PPI	163	326	401	458
DPR	1	2	3	3
代表机型	iPhone3GS	iPhone4	iPhone6P	iPhoneX

而 Android 的缩放基线 PPI 是160，所以 PPI=160 是 1x 屏，PPI=320 是 2x 屏。

从图中可以看出:

DPR 的大小和 PPI 正相关，但不成正比，我们无法通过特定的公式来计算它的大小。

7、逻辑像素和逻辑分辨率

对于同一个元素，DPR 越大，屏幕所需要的物理像素就越多，这是我们上面得出的结论。

那么，在软件程序中，元素的大小到底应该写成多少px？

为了解决这个问题，我们引入 “逻辑像素” 的概念，即 css 中写的 px 。

所谓逻辑像素，就是它的大小和物理像素不是一一对应的。

假设，我们现在设置一个元素的css样式如下：

.el {
  width: 8px;
  height: 1px;
}

那么，这个元素在不同屏幕上渲染方式是不同的：

在 dpr=1 的屏幕上，1个逻辑像素对应1个物理像素。

在 dpr=2 的屏幕上，1个逻辑像素需要对应2个物理像素，才能保证元素同等大小。

同理，在 dpr=3 的屏幕上，1个逻辑像素对应3个物理像素，才能保证元素同等大小。

因此，我们可以得出一个结论：

一个逻辑像素在不同屏幕上所表示的物理像素数是不同的，它的大小和 dpr 一一对应。

有了这个理论，我们就能推导出屏幕的逻辑分辨率，也就是屏幕的 “逻辑宽度” 和 “逻辑高度”。

比如 iPhone6 的物理分辨率为 750 × 1334，dpr = 2, 带入公式就可以得出其逻辑分辨率：

屏幕的逻辑分辨率也可以通过 DOM API 来获取：

// iPhone6
window.screen.width;// 375px
window.screen.height;// 667px

通常，我们在 CSS 中设置的元素尺寸，本质上都是基于逻辑分辨率进行布局的。

8、iPhone 常见的几种规格

设备	逻辑分辨率(point)	物理分辨率(pixel)	屏幕尺寸	dpr	PPI
iPhone 3GS	320 × 480	320 × 480	3.5寸	1	163
iPhone 4	320 × 480	640 × 960	3.5寸	2	326
iPhone 5	320 × 568	640 × 1136	4.0寸	2	326
iPhone 6	375 × 667	750 × 1334	4.7寸	2	326
iPhone 6 Plus	414 × 736	1080 × 1920	5.5寸	3	401
iPhone X	375 × 812	1125 × 2436	5.8寸	3	458
iPhoneXR	414 × 896	828 × 1792	6.1寸	2	326
iPhoneXS Max	414 × 896	1242 × 2688	6.5寸	3	458