一、视口

---

浏览器 显示 网页页面内容 的 屏幕区域 被称为 " 视口 " ;

视口分为以下几个大类 :

• 布局视口
• 视觉视口
• 理想视口

上面的视口 , 只需要关注 理想视口 即可 ;

1、布局视口 ( 网页大小 | 网页大小 > 设备大小 )

布局视口 - Layout ViewPort 指的是 在 浏览器 中，用于 显示文档的区域大小和位置。它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。

在移动设备上，由于屏幕较小，需要 对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。

移动设备上的布局视口 通常比 桌面浏览器中的布局视口 小，因为 移动设备屏幕的大小通常比桌面屏幕小。

为了 使网页在 不同设备上 都能够 正确地显示和布局，开发者可以使用 响应式设计来根据设备的不同调整布局视口。

同时，还可以使用meta标签来指定布局视口的大小和缩放比例，例如：<meta name="viewport" content="width=device-width, initial-scale=1.0"> , 该标签的作用是告诉浏览器，网页的宽度应该等于设备的宽度，并且初始缩放比例应该为1.0。

布局视口 机械地 将 PC 端网页在手机端呈现 ;

Android / iOS 将 布局视口 分辨率 设置为了 980 像素 宽度 , PC 端的网页可以显示在 布局视口 中 ;

如下图所示 , 强行将浏览器的宽屏界面 , 压缩到手机屏幕宽度 , 网页中的元素被缩小了 , 用户只能通过手指缩放查看网页内容 ;

2、视觉视口 ( 设备大小 | 网页大小 > 设备大小 )

视觉视口 - Visual Viewport 指的是 用户 看到的 网页区域 , 即 浏览器窗口中 当前用户 实际看到的页面区域 ;

设备的屏幕大小 和 浏览器窗口的大小 决定了 视觉视口 的大小 ;

• PC 浏览器 中，视觉视口 通常 等于 浏览器窗口 的大小。
• 移动设备浏览器中，设备屏幕较小，页面需要进行缩放以适应屏幕大小，视觉视口 会比 布局视口 小。

为了使 网页在不同设备上都能够正确地显示和布局，开发者需要 考虑不同设备的 视觉视口大小 和 缩放比例，并使用相应的技术和工具进行适配。

一些常用的技术包括

• 响应式设计
• 弹性布局和流体布局

使页面 在不同设备上自适应地进行布局和排版。

下图中 , 在下面的 视觉视口 中 , 网页只能被看到一部分区域 ;

3、理想视口 ( 网页大小 = 设备大小 )

理想视口 - Ideal Viewport 指的是指在浏览器中，使 网页布局 和 显示最佳的视口大小 ; 它是一种标准化的概念，与具体设备的屏幕大小和浏览器窗口大小无关。

理想视口的大小 取决于 网页的内容和布局，通常应该 与布局视口的大小相同 。

通过设置理想视口，可以 使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。

为了设置理想视口，可以 使用 meta 标签来指定视口大小和缩放比例，

例如 : 设置 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 标签告诉浏览器，网页的宽度 应该等于 设备的宽度，并且初始缩放比例应该为1.0。

通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。