PC端
视口实际上指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致
移动端
移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。
因此，引入了布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）三个概念，使得移动端中的视口与浏览器宽度不再相关联
1.视口（viewport）的概念
布局视口（layout viewport）
一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
document.documentElement.clientWidth //布局视口的宽度
document.documentElement.clientHeight //布局视口的高度
可以看到，默认的布局视口宽度为 980px。如果要显式设置布局视口，可以使用 HTML 中的 meta 标签：
<meta name="viewport" content="width=414">
布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算，并被它约束。
视觉视口（visual viewport）
视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
window.innerWidth //视口的宽度
window.innerHeight //视口的高度
视觉视口和缩放比例的关系为：
当前缩放值 = 理想视口宽度 / 视觉视口宽度
所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素
理想视口（ideal viewport）
布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度
screen.width //设备独立像素宽度
screen.height //设备独立像素高度
理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做dip （device independent pixel，设备独立像素,也叫设备逻辑像素）跟设备的硬件像素无关的。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。
逻辑像素宽度*倍率 = 物理像素宽度
用下面的方法可以使布局视口与理想视口的宽度一致：
<meta name="viewport" content="width=device-width">
Meta viewport (视口元信息标签)。ideal viewport大小由设备本身决定
2.设置视口
viewport元标签用来设置layout viewport
2.1宽度
width=device-width
width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，通过设置width=device-width可以将layout viewport的宽度等于 ideal viewport的宽。一般为了自适应布局，普遍的做法是将width设置为device-width，例如：
在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度
2.2初始缩放比
initial-scale=1
设置 initial-scale这条规则实际上做了如下2件事：
(1)将页面初始缩放因子设置为给定的值，根据ideal viewport，计算得到visual viewport的宽
(2)设置layout viewport的宽等于刚刚计算出来的visual viewport的宽。
即visual viewport=ideal viewport=layout viewport
initial-scale=1与width=device-width
(1)使用 width=device-width 和initial-scale=1两个规则，可以将 layout viewport的值设置为 ideal viewport的大小
(2)所有的缩放规则都是相对于 ideal viewport而言的，maximum-scale=3的含义就是页面最多放大到 ideal viewport的3倍
width 和 initial-scale=1
当width 和 initial-scale=1冲突时，使用宽度最大原则来解决，即哪个宽度大用哪个
3.两种像素
像素是计算机屏幕中显示特定颜色的最小区域。当设备尺寸相同时，像素越密集，画面就越精细。
两种不同的像素：物理像素和 CSS 像素
物理像素（设备像素，device pixels）
指设备屏幕的物理像素，任何设备的物理像素数量都是
固定的。
CSS 像素（CSS pixels）
是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算
在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。
image.png
如果用户进行了放大，那么一个 CSS 像素还将跨越更多的物理像素。
作为web开发者需要使用的是逻辑像素，另外物理像素与逻辑像素有个转化叫做dpr（设备像素缩放比例），比如1px=（dpr）² * dp
参考
移动前端开发之viewport的深入理解
浅谈移动端中的视口（viewport）
网友评论