浏览器视口

Posted 2021-12-23 chunshan-blog

css布局受浏览器视口的限制

桌面端浏览器只有布局视口的概念

桌面端浏览器像素比 1px对应css像素为1px

移动端浏览器有布局视口、可视视口、理想视口三个概念。

通过document.documentElement.clientWidth/Height可以获得浏览器的布局视口宽口。

通过screen.width/height可以获取理想视口的宽度或高度

通过meta标签设置视口：

<meta name="viewport" content="name=value,name=value">

每一个名/值对都是一个给浏览器发号命令的指令。它们被逗号分隔，共有6个

1、width:设置布局视口的宽度为特定的值
2、initial-scale:设置页面的初始缩放程度和布局视口的宽度
3、minimum-scale:设置了最小缩放程度(用户可缩小的程度)
4、maximum-scale:设置了最大缩放程度(用户可放大的程度)
5、user-scalable:是否阻止用户进行缩放
6、height:设置布局视口的高度(未被实现)

设备像素比（dpi）：dpi为2，则代表一个css像素，在屏幕上实际标示2px。