iPhone端background-color显示异常：旋转屏幕后背景无法铺满

API 探路者

2026-8-18

iPhone 背景裁切适配问题解决

问题说明

在iPhone设备上无法显示完整背景，存在裁切情况。截图中紫色区域为CANVAS，粉色区域为背景。旋转屏幕后背景无法铺满整个显示屏，仍留有小块空白区域，但Android设备显示正常。

屏幕对比截图

iPhone屏幕效果：
三星屏幕效果：

现有CSS代码

@media screen and (min-width: 320px) and (max-width: 667px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    background: rgb(248, 184, 158);
    background: radial-gradient(
      circle,
      rgba(248, 184, 158, 1) 27%,
      rgba(210, 64, 49, 1) 70%
    );
    overflow-x: auto;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

解决方案

1. 优化Viewport设置

在HTML头部添加适配iOS的viewport配置，确保页面覆盖设备安全区域：

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

2. 调整CSS样式

修改媒体查询内的样式，解决旋转后的尺寸与定位问题：

@media screen and (min-width: 320px) and (max-width: 667px) and (orientation: portrait) {
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  html {
    transform: rotate(-90deg) translateY(-100%);
    transform-origin: left top;
    width: 100vh;
    min-height: 100vw;
    background: rgb(248, 184, 158);
    background: radial-gradient(
      circle,
      rgba(248, 184, 158, 1) 27%,
      rgba(210, 64, 49, 1) 70%
    );
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotate(-90deg) translateY(-100%);
    -webkit-transform-origin: left top;
  }
}