如何解决Ionic v1中iPhone X横屏时内容被刘海遮挡的问题？

这个问题我在维护旧版Ionic v1项目时也踩过坑！viewport-fit=cover只是让页面铺满屏幕，但它不会自动帮你处理横竖屏切换时的安全区域内边距，所以横屏时刘海就会挡住内容。下面给你几个实测有效的解决办法：

iOS 11及以上的设备支持env(safe-area-inset-*)环境变量（旧版用constant()前缀），可以直接用CSS给页面核心容器设置内边距，自动适配横竖屏的安全区域：

/* 给body全局设置安全区域内边距 */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* 兼容iOS 11.0-11.2的旧写法 */
  padding-top: constant(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
}

/* 针对Ionic核心内容组件ion-content单独调整 */
ion-content {
  --padding-top: env(safe-area-inset-top) !important;
  --padding-bottom: env(safe-area-inset-bottom) !important;
  --padding-start: env(safe-area-inset-left) !important;
  --padding-end: env(safe-area-inset-right) !important;
  /* 兼容写法 */
  padding-top: constant(safe-area-inset-top) !important;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-left: constant(safe-area-inset-left) !important;
  padding-right: constant(safe-area-inset-right) !important;
}

这种方式最简洁，横竖屏切换时CSS会自动读取当前方向的安全区域值，不需要额外JS逻辑。

如果你的Ionic v1项目用的WebView版本较老，CSS环境变量可能表现不稳定，可以用JS监听横竖屏切换事件，手动设置内边距：

// 横竖屏切换时更新安全区域样式
function updateSafeAreaPadding() {
  // 兼容新旧iOS的环境变量写法
  const getSafeAreaValue = (key) => {
    if (window.constant) return window.constant(`safe-area-inset-${key}`);
    if (window.env) return window.env(`safe-area-inset-${key}`);
    return '0px';
  };

  const contentEl = document.querySelector('ion-content');
  if (!contentEl) return;

  contentEl.style.paddingTop = getSafeAreaValue('top');
  contentEl.style.paddingBottom = getSafeAreaValue('bottom');
  contentEl.style.paddingLeft = getSafeAreaValue('left');
  contentEl.style.paddingRight = getSafeAreaValue('right');
}

// 页面加载时先执行一次
updateSafeAreaPadding();
// 监听横竖屏切换事件
window.addEventListener('orientationchange', updateSafeAreaPadding);

如果你的项目有ion-header-bar这类固定在顶部的组件，还需要单独调整它们的内边距，避免刘海遮挡导航内容：

ion-header-bar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  /* 兼容写法 */
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-top: constant(safe-area-inset-top);
}

为了避免给没有刘海的旧设备添加多余内边距，可以用媒体查询精准匹配iPhone X及以后的刘海设备：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
       only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
       only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  /* 这里放前面的安全区域样式 */
  body, ion-content, ion-header-bar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
  }
}

这些媒体查询覆盖了iPhone X、XS、XR、11等主流刘海设备的尺寸，不会影响旧款iPhone或安卓设备。

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