iPhone 8 Plus/XS Max横竖屏切换后竖屏视口额外空白问题咨询

问题根因 #

• iOS平台所有浏览器都强制使用WebKit内核，该内核在单标签页模式下旋转屏幕时，会伴随顶部地址栏、底部工具栏的显隐动画，window.innerHeight的更新会晚于resize事件触发时机，你在resize回调中直接读取高度赋值给html元素，拿到的是动画过程中的错误高度，最终导致html高度和实际竖屏可用视口高度不匹配，出现空白。
• 多标签页模式下Safari工具栏常驻，旋转时无显隐动画，高度计算准确，因此不会复现；iPad设备的工具栏默认常驻，也不会触发该问题。
• 你目前的实现将html高度强制写死为固定像素值，相当于放弃了浏览器自带的视口高度适配能力，进一步放大了取值时机错误的影响。

解决方案 #

方案1（推荐，无JS兼容iOS15.4+） #

使用CSS动态视口高度单位dvh，自动适配工具栏显隐后的实际可用高度，无需JS干预，直接替换原有样式即可：

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100dvh;
}

删除原有给html设置高度的JS代码即可。

方案2（兼容低版本iOS） #

给resize事件添加防抖逻辑，等待旋转动画结束后再读取高度赋值，修改你的JS代码如下：

let resizeTimer = null;
// 初始化高度
setHtmlHeight();
// 绑定resize事件
window.onresize = reSizeFunkt;

function setHtmlHeight() {
  const winGroesse = window.innerHeight;
  document.querySelector('html').style.height = `${winGroesse}px`;
}

function reSizeFunkt () {
  // 防抖300ms，等待旋转动画结束
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(setHtmlHeight, 300);
}

同时建议在viewport标签中添加viewport-fit=cover适配iOS安全区域：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

内容的提问来源于stack exchange，提问作者user17412375