窗口，窗口：使用JavaScript测量屏幕尺寸

Judging screen sizes and resolution with JavaScript can be difficult, not least because it can be challenging determining just what you’re measuring… and because, historically, different browsers measured different qualities of the screen using different properties.

使用JavaScript判断屏幕尺寸和分辨率可能很困难，不仅是因为要确定要测量的内容可能具有挑战性，而且因为历史上不同的浏览器使用不同的属性来测量屏幕的不同质量。

Today, those properties are mostly standardized; it’s just a matter of learning the terms associated with each.

如今，这些属性大部分已经标准化。 只需学习与每个术语相关的术语即可。

视口宽度和高度 (Viewport Width and Height)

The dimensions of the active browser window:

活动浏览器窗口的尺寸：

let windowX = document.documentElement.clientWidth,
windowY = document.documentElement.clientHeight;

Measures the CSS viewport width and height when there is no scrollbar. Otherwise, equals the viewport width and height minus scrollbar width.

当没有滚动条时，测量CSS视口的宽度和高度。 否则，等于视口宽度和高度减去滚动条宽度。

let windowX = window.innerWidth,
windowY = window.innerHeight;

Measures the CSS viewport width including scrollbars; can be thrown off by zoom settings on the page.

测量CSS视口的宽度， 包括滚动条 ； 可以通过页面上的缩放设置放弃。

The viewport is the display area of the browser; it does not include the URL bar and browser UI.

视口是浏览器的显示区域 。 它不包括URL栏和浏览器UI。

Therefore the safest way to judge the viewport dimensions is to take the largest of these measurements:

因此，判断视口尺寸的最安全方法是进行以下最大量度：

let windowW = Math.max(document.documentElement.clientWidth, window.innerWidth),
windowH = Math.max(document.documentElement.clientHeight, window.innerHeight);

屏幕宽度和高度 (Screen Width and Height)

Screen width and height are somewhat easier to calculate:

屏幕的宽度和高度比较容易计算：

let screenW = screen.width,
screenH = screen.height;

The screen is the current display the browser is in (note that many devices can have more than one screen).

屏幕是浏览器当前所在的屏幕(请注意，许多设备可以具有多个屏幕)。

重新计算 (Recalculation)

The one thing you have to keep in mind is that the relative “height” and “width” of a screen will change if it is rotated or resized:

您必须记住的一件事是，如果屏幕旋转或调整大小，则其相对的“高度”和“宽度”将发生变化：

• Rotation is most common with mobile devices, but can also affect desktop screens with rotating stands.
  旋转是最常见的移动设备，但也会影响带有旋转支架的桌面屏幕。
• Resizing affects the window width and height on desktop machines, but does not affect mobile devices.
  调整大小会影响台式计算机上的窗口宽度和高度，但不会影响移动设备。

For this reason, it’s best to declare the above variables first (making them global) and place their calculation in functions, calling the functions once on load, and again any time the appropriate event fires:

因此，最好先声明上述变量 (使它们成为global )，然后将其计算放入函数中 ，在加载时调用函数，并在适当的事件触发时再次调用函数：

let screenW = screenH = windowW = windowH = false;

var calcScreen = function() {
  screenW = screen.width;
  screenH = screen.height;
  windowW = Math.max(document.documentElement.clientWidth, window.innerWidth);
  windowH = Math.max(document.documentElement.clientHeight, window.innerHeight);
};

calcScreen();
window.addEventListener("resize", calcScreen());
window.addEventListener("orientationchange", calcScreen());

翻译自: https://thenewcode.com/1181/Window-Window-Measuring-Screen-Sizes-with-JavaScript