瞬间搞懂pt,px,viewport的关系

本文预计阅读时间：5分钟。

如果你知道，就别看了，这篇文章是新手向。

我刚开始开发前端页面的时候，发现了一个问题，就是在html的header标签里，总会出现这么一行代码：

<meta name="viewport" content="width=device-width, initial-scale=1>

这个viewport的meta标签我感觉很神秘，因为每次加上这个标签以后，我的网页看起来就会有一些不大不小的变化（当我选择手机模式的时候）。

你屏幕的分辨率是多少？

换句话问：你屏幕的横向有多少个像素?我的mac pro 是1440px。这个值我可以通过js取得：

var screenWidth = window.screen.width;//1440，肯定是1440

这个值既然是我屏幕的宽度，那么就说明无论我怎么缩放浏览器，这个值都是不变的，请看图。

全屏
不是全屏

你肯定想说，这么简单的事情我当然知道。

那么问题是，你的手机屏幕是多少像素？

好吧，我用的是iPhone6s，我上苹果官网查一下，官网说是750px。

image.png

那么你觉得如果把这个网页放在iPhone6s上运行，screenWidth的值是多少？750px？

如果你真的这么觉得，只能说，你可以感谢我的这篇文章了，让你少爬了一个坑。事实上，显示的值是……375。

image.png

我曹，为什么？

因为在移动设备上，描述宽度用的不是px，而是pt。英文全称是point，就是“点”，可以认为，在手机上，屏幕被划分成了横向375个点。

image.png

浏览器的窗口究竟有多大？

下面这段代码可以获取浏览器窗口的大小，显然，随着浏览器的缩放，这个值是会变化的。

var browserWidth = window.innerWidth;

image.png image.png

其实浏览器宽度就是他妈的viewport宽度。

这是一些不负责任的博主胡逼翻译造下的孽。viewport，视口。说人话就是：浏览器大小。（如果你也很讨厌那种说来说去不说人话的文章，请给我点个赞）

viewport这个meta标签是干什么的？

首先，这个标签只是针对移动设备。
然后，当你加上这个标签，你的浏览器宽度就可以自由设置了。
通常来说，会利用这个标签，将手机浏览器的宽度设置为手机屏幕的宽度，以6s为例子，就是讲浏览器宽度设置为375pt。

image.png

这个时候，我画一个宽度为375px的方块，就会正好填满手机屏幕

image.png

可是不会填满电脑的浏览器

image.png

所以，电脑端的1px对应着手机端的1pt，每个手机的pt都是手机厂商给指定好的，比如小米4是360，iPhoneX是375，iPad是768,等等……

如果不加上viewport的标签，手机端的浏览器像素是多少？

如果你想实验的话可以自己试试，我可以告诉你我的结果：iPhone6s浏览器会显示：980像素。因为viewport的默认值是手机safari出厂时候设定好的。如果感兴趣的话可以去各个手机厂商的官网找一找，他们默认的设置是多少。