在前端开发中，经常需要获取当前视口的高度和宽度来进行相应的布局、动画等操作。然而，在不同浏览器下，获取视口大小的方法可能会有所不同。本文将介绍如何以跨浏览器方式找到视口的精确高度和宽度，避免因不同浏览器间差异导致的兼容性问题。
1. 获取视口大小的方法
在传统的 HTML 中，可以使用以下两种方式获取视口大小：
var viewportWidth = window.innerWidth || document.documentElement.clientWidth; var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
这里使用了逻辑或运算符（||）判断是否存在 window.innerWidth 和 document.documentElement.clientWidth，如果存在则返回其值，否则返回 undefined。
然而，这种方式并不能跨浏览器保证精确度。例如，IE8 及以下版本不支持 window.innerWidth 属性，而 Safari 在页面滚动时不会更新 document.documentElement.clientHeight 的值，导致获取的视口高度不准确。
2. 使用更准确的方法
为了跨浏览器获取精确的视口大小，可以使用以下方法：
-- -------------------- ---- -------
-------- ----------------- -
--- --- - -------------------------
--- ----- - ------------------------- ----------------- -- ---
--- ------ - -------------------------- ------------------ -- ---
------ -
------ ------
------- ------
--
-这里使用了 Math.max() 方法来获取视口大小。doc.clientWidth 和 doc.clientHeight 分别表示文档的宽度和高度（即视口大小），而 window.innerWidth 和 window.innerHeight 表示视口大小加上滚动条的宽度和高度。
需要注意的是，在 Safari 中，文档的宽度和高度会随着页面滚动而变化，因此需要使用 Math.max() 来取最大值。
3. 示例代码
以下代码演示了如何使用以上方法获取视口大小，并在页面中显示出来：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------- ------------
-------
-------------- -
--------- ------
------- --
------ --
----------------- ------- -- -- -----
------ ------
-------- -----
---------- -----
-
--------
-------
------
---- -------------------------
--------
-------- ----------------- -
--- --- - -------------------------
--- ----- - ------------------------- ----------------- -- ---
--- ------ - -------------------------- ------------------ -- ---
------ -
------ ------
------- ------
--
-
--- ------------ - ------------------
--- ------------------- - -----------------------------------------
----------------------------- - --------- ----- - - ------------------ - - - - - --------------------
--------------------------------- ---------- -
--- ------------ - ------------------
----------------------------- - --------- ----- - - ------------------ - - - - - --------------------
---
---------
-------
-------这个示例代码在页面底部右侧显示了当前视口大小，并使用 window.addEventListener() 方法监听了 resize 事件，使视口大小可以随窗口大小的变化而实时更新。
4. 总结
本文介绍了如何以跨浏览器方式获取视口的精确高度和宽度。通过使用以上方法，可以避免不同浏览器间获取视口大小的差异性，从而提高前端开发的兼容性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14294