浏览器视口

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

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

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

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

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

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

通过meta标签设置视口:

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

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

设备像素比(dpi):dpi为2,则代表一个css像素,在屏幕上实际标示2px。

 

你可能感兴趣的:(浏览器视口)