在移动端前端开发中，我们经常会遇到 iOS 系统下 Safari 浏览器的“奇怪”行为。其中之一就是 iOS Safari 的 innerHeight 属性，它返回的是整个文档的高度，而不是视窗的高度。这就导致了在 iOS 设备上开发的网站，在浏览器向下滚动时，布局会错乱。为了解决这个问题，有一位前辈开发了一个 npm 包，名为 ios-inner-height，来提供更加精确的 innerHeight 属性。
安装
在使用 ios-inner-height 包之前，我们需要先安装它。使用以下命令：
npm install ios-inner-height
如果你使用 Yarn，则使用以下命令：
yarn add ios-inner-height
使用
安装成功后，我们就可以在项目中使用 ios-inner-height 来获取视窗高度，而不是文档高度。使用方式很简单，只需要在需要使用 innerHeight 的地方导入并调用即可。
import iOSInnerHeight from 'ios-inner-height'; const viewportHeight = iOSInnerHeight();
对于需要实时获取视窗高度的场景，我们可以将 iOSInnerHeight 函数传入 requestAnimationFrame 或者 resize 事件中，来实时更新视窗高度值。
window.addEventListener('resize', () => {
requestAnimationFrame(() => {
const viewportHeight = iOSInnerHeight();
console.log(viewportHeight);
// do somethings...
});
});实现原理
默认情况下，我们获取 innerHeight 属性得到的是整个文档的高度，而不是视窗的高度。这是因为 iOS Safari 浏览器在浏览器地址栏和底部工具栏的显示和隐藏上有一些不同的行为。当这两个栏目显示时，浏览器会将工具栏的高度计算在 innerHeight 中；当这两个栏目隐藏时，浏览器则会将工具栏的高度从 innerHeight 中减去。
因此，要精确的获得视窗的高度，需要先判断地址栏和底部工具栏是否隐藏，然后根据这个状态来计算出视窗的高度。如下所示：
-- -------------------- ---- -------
------ ------- -------- ---------------- -
----- ----- -
-------------------------------------------- --
-----------------
-- -------- -
------ -------------------
-
----- ----------- - ------------------
----- ------------ - -------------------
-- --------------
-- -
------------------- --- -- -- ----------- --- --- -- ------------ --- ---- --
------------------- --- --- -- ----------- --- --- -- ------------ --- ---- --
------------------- --- - -- ----------- --- --- -- ------------ --- ---- --
------------------- --- --- -- ----------- --- --- -- ------------ --- ----
- -
------ ---- -- ------ - ------
-
-- --------------
-- -
------------------- --- -- -- ----------- --- --- -- ------------ --- ---- --
------------------- --- --- -- ----------- --- --- -- ------------ --- ---- --
------------------- --- - -- ----------- --- --- -- ------------ --- ---- --
------------------- --- --- -- ----------- --- --- -- ------------ --- ----
- -
------ ---- -- ------ - -----------------
-
------ -------------
-总结
在 iOS Safari 浏览器中，获取 innerHeight 属性会返回整个文档的高度，为了精确的获取视窗的高度，我们可以使用 ios-inner-height 这个 npm 包。它的实现原理是根据当前设备的状态判断地址栏和底部工具栏是否隐藏，然后根据这个状态来计算出视窗的高度。这个包可以在解决 iOS 设备上网页布局错误的问题中起到很好的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fa6