移动web开发需要知道的那些概念

iPhone 6 技术规格

点我获取设备信息和计算

1. 分辨率

1. 首先我们需要知道什么是分辨率？
2. 分辨率是怎么来的？
   简单点理解就是手机屏幕是由很多个小点排列组合成了一张屏幕，就比如我们在手机上看一张图片，每个小点负责显现一种颜色，然后就拼成了一张完整的图片，那我们就把每个小点称为一个像素 (pixel)。
   那对于一张屏幕来说是有固定的总像素个数，我们把屏幕上有多少行的像素个数和有多个列的像素个数叫做分辨率，所有分辨率的表示方法就是 宽度像素个数 x 高度像素个数。

从上图我们可以看到 iPhone 6 的分辨率是 1334 x 750 (横屏)，意思就是横着的每行有 1334个像素和每列有750个像素

2. 物理尺寸

打个比方，我有两张相同分辨率的屏幕(都是1334 x 750)，但是他们的寸尺是不一样的，那这就意味着屏幕上的每个小点(像素)的寸尺是不同的，那么每个小点排列起来就组成了一个完整的高度和宽度，我们就把这叫做物理尺寸。

1. 分辨率高，物理尺寸小，就意味着每个点的尺寸很小，如果是手机上有个按钮，那么它的可点击区域就很小，也就很难点中。

2. 分辨率低，物理尺寸大，就意味着每个点的尺寸很大，如果是手机上有张图片，那么它就会很粗糙

3. DPI (点每英寸)

不同屏幕的分辨率和物理尺寸是不一样的，我们把一英寸(1 英寸=2.54 厘米)里能包含的像素的个数叫做屏幕的解析度，单位叫 DPI (dots per inch)

4. PPI (像素每英寸)

像素是专用于荧幕的概念，指的是荧幕可以解析的最小的点。因此，PPI指的是像素在荧幕上的密度，PPI越高图像就越清晰。

不论是DPI还是PPI，实际都是一种换算的概念，即将图片承载的信息换算为现实中的图片（即人眼能实际看到的图像）。DPI和PPI的区别在于换算的途径不同，DPI面向的是印刷受体，而PPI面向的是荧幕。

5. 屏幕尺寸

尺寸

手机屏幕尺寸就是指手机屏幕对角线的长度，而这个长度的单位使用的是英寸(1 英寸=2.54 厘米)。

• 计算iPhone 6的尺寸
  已知：分辨率是: 1334 x 750，PPI是: 326
屏幕尺寸 = √1334² + 750² / 326 = 4.69441717791411
  最终得出的结果跟官方标出的 4.7 英寸是对应上的。

• 计算我的红米K40的PPI
  

  image.png
  
  PPI = √2400² + 1080² / 6.67 = 394.5742
  所以我的红米k40的PPI差不多就是395

6. 物理像素

物理像素是显示器最小的物理显示单位，每个物理像素由颜色值和亮度值组成。例如iphone 6手机屏幕有1334 * 750个物理像素，我的红米K40手机屏幕有2400 * 1080个物理像素。

7. 设备独立像素(或者叫逻辑像素)

我们平时开发写CSS时写的 px单位就称为逻辑像素

8. 物理像素比 (DPR)

dpr = 物理像素 / 设备独立像素

在js中，我们可以通过window.devicePixelRatio来获取dpr，在css中可以通过-webkit-device-pixel-radio 来获取。

dpr

默认情况下一个px和一个像素是一一对应。
但是我们肯定也听说过iphone的Retina 屏，它其实就是一个二倍屏，或者说它的DRP=2，意思就是我们写的1px需要 4个物理像素来显示。

image.png

看到这里就能理解一个很经典的问题 移动端1px的问题，至于怎么解决这个问题有很多方式，自己百度一下吧。

这解释了为什么我们在chrome中打开移动端调试时显示的375 * 667

image.png

还有就是解释了为什么一般设计师给我们的图都是750的，我们在开发的时候要先除以2

9. 如何在chrome设备中添加自己的手机机型

1. 用手机点我获取设备信息和计算
2. 按F12打开开发者工具，然后左上角点设置按钮里面的设备
   
   image.png

10. 视口（viewport）

视口就是浏览器显示页面内容的屏幕区域，也就是可视区域。
视口可以分为布局视口和理想视口还有设备视觉视口

image.png

• 布局视口（layout　viewport）
  一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
  默认情况下移动端设备上的viewport都是要大于浏览器可视区域的，一般值为980px也可能有其他值，根据不同设备来定，所以PC上的网页大多能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

• 设备视觉视口（visual　viewport）
  设备视觉视口，移动设备浏览器可视区域的大小，其宽度并一定为移动显示设备的屏幕宽度，在initial-scale缩放为1的情况下才相等。

属性	说明
width	控制viewport的大小，可以指定一个值，如600或者特殊的值device-width
height	和width相对应，指定高度
initial-scale	初始缩放比例，页面第一次加载时的缩放比例
maximum-scale	允许用户缩放到的最大比例，范围从0到10.0
minimum-scale	允许用户缩放到的最小比例，范围从0到10.0
user-scalable	用户是否可以手动缩放，值可以是：yes、 true允许用户缩放；no、false不允许用户缩放

• 理想视口（ideal　viewport）
  为了使网站在移动端有最理想的浏览和阅读宽度而设定
  理想视口对设备而言，就是最理想的视口尺寸
  需要添加，mate标签通知浏览器操作
  meta视口标签主要目的：布局视口应该和理想视口宽度一致，简单理解就是，设备有多宽，布局视口就多宽

11. 常用的meta

12. 移动端html模板

参考

1. 物理像素 、物理像素比、物理像素比、px 逻辑像素概念解析
2. 你必须要知道的移动端开发知识