视口 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">