一个网页，在电脑端和pc端，设置同样的像素，为什么显示的大小不同？
先直接回答一下这个问题，再讲一下相关的概念；
- 移动端对这个页面进行了缩放，这是浏览器帮我们做的，虽然没有设置 meta 标签，没有设置initial-scale(缩放值）
浏览器默认，对于移动端的页面，会先在980px宽的”幕布“上渲染，然后把这个“幕布”缩放在屏幕尺寸上，相当于meta标签这样设置：
<meta name="viewport" content="980, initial-scale=0.382">
0.382是如何计算出来的：设备像素宽度/布局视口宽度（幕布） 即 375/980
但是再看一下，在页面上最宽的元素是1040px，是如何放在980px的幕布上的呢？
<meta name="viewport" content="1040, initial-scale=0.360">
计算过程同上
将这个meta标签放在 https://lishiwangye.51240.com/ 里，发现跟浏览器默认一样，缩放了，没有滚动条
！！！移动端写css页面布局宽度980px以下的，都是在980px宽的幕布上先渲染然后缩放，而在pc端网页没有缩放，是因为浏览器不进行默认缩放，直接显示
原因现在从头捋一下
像素：
px(CSS pixels)：虚拟像素，可以理解为“直觉”像素，我要这个元素宽高10px；
dp(device pixels)：设备像素（物理像素），可以理解为实际的像素，这个宽高为10px的元素在设备中实际用了多少个物理像素点表示；
dpr(device pixels ratio)：设备像素比，公式为1px = (dpr)^2 * 1dp，可以理解为1px由多少个设备像素组成；
例如：设备 dpr=2，1px 用4个像素点表示，即2×2dp
iPhone4之前，移动端dpr都是1，即css 1px在设备上显示1个物理像素点
dpr>=2的，称为视网膜屏幕
viewport:
viewport原理在于：
先将页面渲染在一个width为显示设备默认尺寸的viewport上，如iphone6为980px；
然后将viewport等比例缩放至整个手机屏幕上；
假如元素宽高为375*667px，先将元素渲染在宽度为980px的viewport上，然后等比例缩放在整个手机屏幕上
layout viewport：布局视口（幕布）
visual viewport：视觉视口（屏幕的尺寸）
ideal viewport：理想视口（屏幕与布局相同时候的视口）