CSS—viewport视口详解

最新推荐文章于 2024-11-04 21:44:28 发布

空城里的往日时光

最新推荐文章于 2024-11-04 21:44:28 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42472040/article/details/104158020

27 篇文章

订阅专栏

本文详细解析了PC端和移动端的视口概念，包括布局视口、视觉视口和完美视口的区别，以及如何在移动设备上实现理想的布局视口尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致，移动端视口与浏览器窗口宽度完全独立。

PC端视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。如下代码均可获得PC端视口宽度。

window.innerWidth

移动端视口分为三类，其一布局视口、其二视觉视口、其三完美视口。

布局视口

缩放时布局视口的CSS像素数量保持不变，只是体积发生变化，所以视觉上变大或变小。

document.documentElement.clientWidth  //布局视口的宽度
document.documentElement.clientHeight //布局视口的高度

视觉视口

视觉视口是指用户正看到的网页区域，大小等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。

window.innerWidth  //视觉视口的宽度
window.innerHeight //视觉视口的高度

完美视口

布局视口不友好，没有考虑到手机尺寸，所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸，用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。

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

如上代码所示，将布局视口的宽度设置为设备独立像素的宽度。通过如下代码可以获取设备独立像素的尺寸。

screen.width  //设备独立像素宽度
screen.height //设备独立像素高度