【抽丝剥茧】解读可视区域尺寸和浏览器渲染模式适配的关联

解密手机和平板设备上的可视尺寸差异

想象您正在使用一台配备中等尺寸屏幕的手机，宽度为 360px，高度为 640px。当您访问某个网页时，您会发现它的可视尺寸并不会完全符合屏幕尺寸，而是稍小一些。这是因为浏览器采取了一种称为 "viewport meta tag" 的方法来设定可视尺寸，而不是直接使用设备的屏幕分辨率。

Viewport meta tag 是一种特殊的 HTML 元素，它可以告诉浏览器如何调整网页内容以适应设备屏幕。在通常情况下，viewport meta tag 会被设置成 "width=device-width"，这意味着浏览器将可视区域的宽度设为与设备屏幕宽度相同。

不过，由于手机屏幕的宽度通常小于桌面电脑屏幕的宽度，因此使用 viewport meta tag 设定可视尺寸时，手机上的可视区域宽度就会小于桌面电脑上的可视区域宽度。

浏览器渲染模式的幕后故事

既然我们已经了解了 viewport meta tag 的作用，那么让我们来看看浏览器渲染模式是如何影响可视尺寸的。

浏览器渲染模式主要分为两种：

1. 标准模式 (Standards mode)： 这是浏览器的默认模式。在这种模式下，浏览器会严格遵循网页的 HTML 和 CSS 规范，并根据这些规范来渲染网页内容。
2. 怪异模式 (Quirks mode)： 这是浏览器的遗留模式。在这种模式下，浏览器会使用一套宽松的渲染规则，这可能会导致网页内容出现意外的表现。

在大多数情况下，浏览器都会以标准模式来渲染网页。不过，如果网页中包含过时的 HTML 或 CSS 代码，或者如果网页使用了某些非标准的特性，那么浏览器可能会切换到怪异模式来渲染网页。

不同渲染模式下获取可视尺寸的方法

正如我们之前提到的，可视尺寸通常使用 viewport meta tag 来设置。然而，在标准模式和怪异模式下，获取可视尺寸的方法是不同的。

在标准模式下，我们可以使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 来获取可视尺寸的宽度和高度。

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;

在怪异模式下，我们需要使用 document.body.clientWidth 和 document.body.clientHeight 来获取可视尺寸的宽度和高度。

const width = document.body.clientWidth;
const height = document.body.clientHeight;

结语

在本文中，我们深入探讨了影响可视尺寸适配的因素，重点分析了不同渲染模式下的可视尺寸获取方法。只有充分理解可视区域尺寸和浏览器渲染模式之间的关系，才能在构建响应式网页时，确保我们的网站内容在各类设备上都能够完美展现。