CSS 视口 - viewport

CSS 视口 - viewport

什么是视口

视口-viewport 就是浏览器显示页面内容的屏幕区域。

视口分类：

• 布局视口 - 弃用 (deprecate)
• 视觉视口 - 弃用 (deprecate)
• 理想视口 - 开发主流

布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlnYuDxo-
  

视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域 。
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tBGMZDtc-1625924689345)(2021-07-10-21-34-22.png)]