视口viewport的理解（布局视口、视觉视口、理想视口）

科技前沿 • 2025-01-28 10:17 • 阅读 58

大家好，我是讯享网，很高兴认识大家。

在一个浏览器中，看到的区域就是视口（viewport）

在PC端页面中，不需要对视口进行区分，因为布局视口和视觉视口是同一个

但在移动端，你布局的视口和可见的视口是不一样的

这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示；
所以在默认情况下，移动端的布局视口是大于视觉视口的

所以在移动端，我们将视口分成三种情况

布局视口（layout viewport）
视觉视口（visual layout）
理想视口（ideal layout）

这些概念的区分来自PPK，这是他对于视口的描述

讯享网

A tale of two viewports — part two

1.布局视口和视觉视口

在创建一个新的html文件的时候，默认会帮忙适配视口的，所以想要了解布局视口和视觉视口的关系的话，需要把默认适配的代码先注释掉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  //下面一行就是视口的适配
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>
  
</body>
</html>

讯享网

给网页添加一个宽100px，高100px的div盒子，如图1-1所示

讯享网<style> .box{ width:100px; height:100px; } </style> <div class="box"></div>

视口viewport的理解（布局视口、视觉视口、理想视口）

1.布局视口和视觉视口

相关推荐