ViewPort视口

Posted 2020-10-03

一个典型的针对移动端优化的页面会包含类似这样的内容：

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

　　maximum-scale=1.0, user-scalable=no">

　　其中的name="viewport"中的viewport我们称作视口

常说的viewport-视口就是显示器显示页面内容的屏幕区域

　　1.layout viewport(布局视口)

　　2.visual viewport(视觉视口)

　　3.ideal viewport(理想视口)

　　4.css像素

　　5.dip(device independent pixels)设备独立像素和CSS像素之间的关系

 

viewport的概念

　　通俗的来说移动设备上的 viewport 就是设备的屏幕上能用来显示网页的那个区域，再具体点儿就是浏览器上或是 app 中的 webview 用来显示网页的那部分区域。

layout viewport布局视口

　　一般呢，移动设备的浏览器都默认设置了一个 viewport 定义了一个虚构的布局视口，用于解决早期页面在手机上的显示问题。 ios 和 android 基本都将介个视口分辨率

　　设置为 980px，所以 pc 上的网页基本可以在手机上呈现，

　　只是元素看上去会比较小，并可以手动缩放页面。

　　移动设备上的浏览器认为自己必须能正常显示所有的网站，无论是不是为移动设备而设计的网站。但由于移动设备的屏幕都不是很宽，如果以浏览器的可视区域作为

　　viewport 的话，那些为桌面浏览器设计的网站放到移动设备

　　上显示时，必然会因为移动设备的 viewport 太窄而挤作一团，甚至毁掉布局。

　　

　　css 中的 1px 并不一定代表屏幕上的 1px，分辨率越大，css 中 1px 代表的物理像素就会越多，分辨率比的值也越大。这很好理解，你分辨率增大了，但屏幕尺寸并没

　　有变大，就必须让 css 中的 1px 渲染（塞入）更多的物理像素，才能让 1px 的东西在屏幕上的大小与那些低分辨率的设备看起来差不多，不然就会因为太小而看不清。

 

　　所以如果把移动设备上浏览器的可视区域设为 viewport 的话，某些网站（例如左右分区的网页）就会因为 viewport 太窄而显示错乱，所以这些浏览器就决定：默认情

　　况下把 viewport 设为一个较宽的值，比如 980px。这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。所以也把这个 浏览器默认的 viewport

 

　　叫做 layout viewport 。它的宽度可以通过 document.documentElement.clientWidth  来获取。

 

 

　　visual viewport 视觉视口与 device pixel 设备物理像素（分辨率）

　　　layout viewport 的宽度是 > 浏览器可视区域的宽度的，所以我们还需要一个 viewport 来代表 浏览器可视区域的大小，这个 viewport 叫做 visual viewport。

　

　　无论你是用桌面设备或是移动设备的浏览器去访问一个页面的时候，你所看到的浏览器窗口就是你的 visual viewport ，它的宽度可以通过 window.innerWidth 来获取。

　　对于一个移动设备来说就是你通过浏览器看到的那部分的大小，它的计量单位为 px，设备独立像素 dip 的那个 px。这个 visual viewport 通常是可以变化的，比如你对

　　屏幕进行缩放，就可以改变它的大小，或者移动屏幕的滚动条就可以改变 visual viewport 的位置。

 

 

 

　　视觉视口是物理屏幕的可视区域，屏幕显示器的物理像素。相同尺寸的屏幕像素密度大的设备，硬件像素会更多。

　　　

　　设备像素

　　设备像素是物理概念，指的是设备中使用的物理像素，用 px 表示，它是一个“相对绝对单位”，即：

 

　　1.在同一设备上每个设备像素所代表的物理长度是固定不变的（绝对性）

 　   2.但在不同设备之间每个设备像素所代表的物理长度是可以变化的（相对性）

 

　　layout viewport 与 visual viewport 的区别与联系

 

 

 

　　把 layout viewport 想像成为一张不会变更尺寸的大图。想像你有一个小一些的镂空框架（比如一个没放照片的相框），你通过这个框来看这张大图。类似于看望远镜 这个

　　框架的周围被不透明的材料所环绕，于是掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是 visual viewport 。你可以拿远框架

　　（缩小）来看整个图片，或者可以靠近一些（放大）只看局部。你也可以移动框架的位置、改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

 

　　ideal viewport —— 移动设备的理想视口。

 

 　　

　　ideal viewport 并没有一个固定的尺寸，不同的设备拥有不同的 ideal viewport。以 iPhone 来说，所有的非 plus 系列的 iPhone 的 ideal viewport 宽度都是 320px，也就是说，

　　在非 plus 系列的 iPhone 中，css 中的 320px 就代表 iPhone 屏幕的理想宽度。

　　移动设备上的 viewport 分为 layout viewport、 visual viewport 和 ideal viewport 三类，其中 ideal viewport

 

　　是最适合移动设备的 viewport，它宽度 = 移动设备的屏幕宽度，只要在 css 中把某一元素的宽度设为 ideal viewport 的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽

　　度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向

　　滚动条，都可以完美的呈现给用户。

　　

　　dip

　　设备独立像是跟设备的硬件像素（物理像素）无关的，一个dip在任意像素密度的设备上都占据相同的空间。

　　设备的独立像素宽与物理像素宽（或者说像素分辨率）的关系可以满足这样的公式

：物理像素宽带=独立像素宽度*倍率

　　CSS像素

　　  CSS中的1px并不代表设备的1像素