iPhone在Chrome横竖屏切换时内容被裁剪的问题咨询

你的猜测完全正确——iOS Chrome在横竖屏切换时，resize事件可能无法及时触发，导致你通过JavaScript设置的--doc-height变量没有同步更新，最终出现内容被裁剪为之前横屏视口高度的问题。因此，确实需要监听orientationchange事件来重新执行高度计算逻辑。

原因说明 #

iOS Chrome的横竖屏切换机制和Safari存在差异，resize事件在部分场景下会出现延迟或不触发的情况，而orientationchange是专门针对设备方向变化的事件，能更可靠地捕获横竖屏切换动作，确保视口高度变量及时更新。

修改后的代码 #

更新JavaScript部分，同时监听resize和orientationchange事件：

const documentHeight = () => {
  const doc = document.documentElement
  doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}

// 同时监听窗口缩放和设备方向变化事件
window.addEventListener('resize', documentHeight)
window.addEventListener('orientationchange', documentHeight)

// 初始化执行一次
documentHeight()

如果担心快速旋转屏幕时频繁触发计算，可添加防抖优化：

const documentHeight = () => {
  const doc = document.documentElement
  doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}

// 防抖函数，避免频繁计算
const debounce = (func, delay = 100) => {
  let timeoutId
  return (...args) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => func.apply(this, args), delay)
  }
}

const debouncedDocumentHeight = debounce(documentHeight)

window.addEventListener('resize', debouncedDocumentHeight)
window.addEventListener('orientationchange', debouncedDocumentHeight)

documentHeight()

CSS和HTML部分可保持原有逻辑：

/**
 * 基础`html`样式
 *
 * 1. 修复iOS Safari中视口高度/地址栏问题，容器高度通过JavaScript设置
 * 2. 由于`html`元素设置了`overflow: hidden`，允许小视口下页面溢出，宽视口下重新隐藏
 */
html {
    height: 100vh;
    height: var(--doc-height); /* [1] */
    overflow: hidden; /* [2] */
}

/**
 * 基础`body`样式
 *
 * 1. 修复iOS Safari中视口高度/地址栏问题，容器高度通过JavaScript设置
 */
body {
  height: 100vh;
    height: var(--doc-height); /* [1] */
    margin: 0;
    padding: 0;
}

/**
 * Grid样式
 *
 * 1. 修复iOS Safari中视口高度/地址栏问题，容器高度通过JavaScript设置
 */
.grid {
  background: red;
  height: 100vh;
  height: var(--doc-height);
}

<html>
  <body>
    <div class="grid"></div>
  </body>
</html>

额外注意事项 #

• 确保使用最新版本的iOS Chrome，虽然旧bug帖中的问题已修复，但浏览器的视口处理逻辑仍可能存在版本差异
• 始终使用window.innerHeight计算视口高度，不要用screen.height（后者是设备物理高度，不包含浏览器UI的动态变化）
• 测试时覆盖快速旋转、缩放屏幕等边缘场景，确保高度计算的稳定性

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