web开发学习总结之移动端浏览器视口大小

1 PPI

首先明确一点，PPI数值的大小与屏幕（电脑或手机）分辨率大小、屏幕（电脑或手机）视口大小没有任何关系。
PPI全称是Pixal Per Inch 每平方英寸像素的个数。
手机的PPI很大，所以屏幕小但是像素多，所以颗粒感小(视网膜屏)，让人看不到屏幕上的像素点。

2 浏览器视口大小

2.1 电脑的浏览器视口宽度

win10系统有点准备工作。就是先在设置->显示页面，把“更改文本、应用等项目的大小”改为100%。并且把显示分辨率设为系统推荐的分辨率。并且浏览器一定要最大化！

然后我们使用下面这条语句来输出浏览器的视口宽度。

document.documentElement.clientWidth;

由于我们把浏览器最大化了，然后发现输出的视口宽度与我们电脑的分辨率相同，如上图都是1920。
所以我们得出一个结论，在电脑中，当浏览器最大化时，电脑的视口宽度 = 分辨率宽度；也就是说电脑端浏览器的视口宽度和电脑本身的分辨率相关。。

2.2 手机的视口宽度

首先明确一点也是特别重要的一点，那就是
手机浏览器的视口大小和手机的分辨率没有任何关系！
手机浏览器的视口大小和手机的分辨率没有任何关系！
手机浏览器的视口大小和手机的分辨率没有任何关系！。

手机端有两个视口：
①手机浏览器的默认视口，手机的默认视口大小永远是980px，和手机分辨率没有任何关系；
②手机浏览器的约束后视口，约束之后的视口宽度，和设备宽度（手机屏幕的实际宽度）相同，实际上就是人为设置的数字。每个设备出厂前都会设置一下约束视口之后的宽度。

2.2.1 手机浏览器的默认视口

先来看手机浏览器的默认视口，为什么是固定的980px呢？

故事是这样的，有一天乔帮主在想一个问题，就是自己的苹果手机如果在市场上火爆了，但是各个网站还没有来得及制作手机专业网页，那么用户不得不用手机访问电脑版的网页。如何用小屏幕访问大屏幕的页面也同样可读呢？乔帮主就想着为手机固定一个视口宽度，让手机的视口宽度等于世界上绝大多数PC网页的版心宽度，就是980px。这样，用手机访问电脑版网页的时候，刚好没有留白。像从3000米高空，俯瞰整个页面，用户想看哪个区域，可以用两个指头捏合，放大页面。
安卓手机也非常尊重乔帮主的决定，都把自己的手机的视口定位980px。

2.2.2 手机浏览器的约束后视口

我们在页面前加上约束视口的语句。

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

这时我们再用document.documentElement.clientWidth去打印视口宽度，发现视口宽度的值和屏幕宽度是一样的。而且不同手机，这个值不同。
原因是约束后视口大小是各个手机生成商根据自己的手机来设置的。
也就是说，因为手机的不同（品牌、型号不同），手机屏幕宽度也就不同，不同手机的约束后视口宽度也就不同！。
既然都不同，那为何还弄个约束后视口出来呢，直接用默认视口不就行啦？
因为手机屏幕实在太小啦！这么小的一个屏幕去完全层递宽度为980px的网页，结果必然是网页上的字变得特别特别小，以至于人根本没法阅读。而使用约束后的视口去层递页面，比如用340px的约束后视口去层递980px大小的页面，虽然会出现水平滚动条，但是页面中的字大小是非常适合人眼阅读的。这就是为什么要使用约束后视口的根本原因。
我们以后讲的手机的视口大小都是指这个约束后的视口大小。
ps:约束后的视口大小一般在320~480px这个范围内。