首先必须要明白一点：（假设手机分辨率3200 * 1420），css中的1px不一定等于实际屏幕的1px（这里有1420px）,系统会自动匹配一个最合适的比例（假设这个比例为3.5），用屏幕的3.5px 去渲染css中的1px，也就是说，所有的显示屏幕，不管你的分辨率是多少，系统都会自动匹配一个最适合的比例（假设是5），用实际屏幕的5px去渲染css中的1px
1.实际开发中需要理解三个视口
布局视口：（注意：开发中用的就是这个视口宽度）宽度一般默认是980px ，所以一行最大能放980px的标签，超过就会换行（与开发中的px一比一对应）
视觉视口：（注意：实际看到的就是这个视口宽度）假设一个屏幕分辨率为3200*1420，渲染比例是2，那么这个视觉视口的宽度为1420px/2=710px，一个屏幕内宽度最大能看到710px，超过就要往右滑动才能看
但开发中是用布局视口，所以，视觉视口宽度为710px容不下我们的布局视口宽度980px，所以在手机查看的时候，需要往右滑动，才能看到右边的页面。这就不太和谐，所以有下面的理想视口出现
理想视口：有没有一个视口，这个视口宽度就等于视觉视口的宽度（注意：不同屏幕的分辨率，视口宽度可能会不同），这样就不用往右滑动了，这样子，这个视口宽度就能适应所有的屏幕的视觉视口宽度。
添加 <meta name="viewport" content="width=device-width,initial-scale=1" /> 就让我们的布局视口变成了理想视口，这样就能适应所有的屏幕并且不同的分辨率了
总结：
1.开发中用的是布局视口
2.理想视口就等于视觉视口
3.设置meta 让布局视口变成理想视口（视觉视口）
目的就是为了让布局视口能适应所有屏幕的分辨率
标签：视口,分辨率,布局,宽度,视觉,屏幕,前端开发 From： https://www.cnblogs.com/babyone/p/17879117.html