视口 viewport

1 视口的概念

视口 (viewport) 是用户网页的可视区域。

在CSS标准文档中,视口 (viewport) 被称为初始包含块, 这个初始包含块是所有CSS百分比宽度推算的根源,它给CSS布局限制了一个最大宽度。

在PC端,视口的宽度和浏览器窗口的宽度一致。而在移动端,视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。

2 PC端视口

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。我们改变浏览器窗口的大小,视口也随之改变

获取视口大小:

window.innerWidth;        //浏览器视口(viewport)宽度(单位:像素),如果存在垂直滚动条则包括它。
window.innerHeight;   //浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。

document.documentElement.clientWidth;   //浏览器视口(viewport)宽度(单位:像素),不包含垂直滚动条
document.documentElement.clientHeihgt   //浏览器视口(viewport)高度(单位:像素),不包含水平滚动条

window.screen.width;  // 屏幕的宽度  (设备独立像素)
window.scroll.height; // 屏幕的高度  (设备独立像素)

3 移动端视口

3.1 布局视口 Layout Viewport

布局视口是在html元素之上的容器(包含块),我们的页面就“装”在布局视口中。

设想一下,我们给html设置 html{width: 100%}, 这个100%是基于什么计算出来的呢? 根据定义如果某些属性被赋予一个百分值的话,它的计算值是由这个元素的包含块计算而来的, 而html的包含块就是布局视口,它是所有CSS百分比推算的根源,如果说CSS是一支画笔,那么布局视口就是那张画布吧。

获取布局视口的大小

document.documentElement.clientWidth;
document.documentElement.clientHeiht;

手机上,为了容纳为桌面浏览器设计的网站,默认的布局视口的宽度远大于屏幕的宽度

布局视口的出现,在极大程度上帮助了桌面网站到移动设备上的转移。

3.2 视觉视口 Visual Viewport

视觉视口是指用户通过设备屏幕看到的区域,可以通过缩放来改变视觉视口的大小。

计算视觉视口的大小:

window.innerWidth;
window.inenrHeight;

移动款可以双指缩放,缩放改变的是CSS像素的大小,放大时CSS像素增大,则一个CSS像素可以跨越更多的设备像素,视觉视口会变小。

放大会使视觉视口变小:因为视觉视口也是通过CSS像素度量,而放大就是使CSS像素放大,假设屏幕上本来需要200个CSS像素才能占满屏幕,由于放大,现在只需要100个CSS像素就能占满,所以视觉视口的宽就变成100px。

3.3 理想视口 Ideal Viewport

理想视口是指网站在移动设备中的理想大小,这个大小就是设备的屏幕大小。

对于进行了移动适配的网页,我们希望让布局视口跟设备屏幕宽度一样大,这就就是理想的布局视口

设置布局视口等于理想视口:

<meta name="viewport" content="width=device-width">

results matching ""

    No results matching ""