移动端Safari中@media (orientation)媒体查询失效问题求助

• 在iOS 15.8.3系统的iPhone SE设备上，移动端Safari无法正常响应@media (orientation)媒体查询
• 代码在Chrome、Firefox（覆盖Windows/Linux/macOS及Android平台）和桌面端Safari均能正常运行
• 不使用@media查询时页面可正常显示，但无法区分横竖屏；因目标用户涵盖iOS和Android，必须实现跨设备横竖屏识别
• 已尝试多种@media写法，均未解决问题

相关原始代码 #

CSS代码

.jma_mobile_html {
  height: -webkit-fill-available;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.jma_mobile_body {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

.jma_mobile_title_center {
  color: #FFFFFF;
  background: #AAAAAA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  @media (orientation: portrait) {
    height:8dvh;
    font-size: 4dvh;
  }
  @media (orientation: landscape) {
    height: 10dvh;
    font-size: 5dvh;
  }
  overflow:hidden;
}

.jma_mobile_title_sub_center {
  color: #FFFFFF;
  background: #AAAAAA;
  display: flex;
  justify-content: center;
  align-items: center;
  @media (orientation: portrait) {
    font-size:1.5dvh;
  }
  @media (orientation: landscape) {
    font-size: 2dvh;
  }
  width:100%;
  overflow:hidden;
}

.jma_mobile_page {
  @media (orientation: portrait) {
    height:87dvh;
    font-size: 3dvh;
  }
  @media (orientation: landscape) {
    height: 80dvh;
    font-size: 5dvh;
  }
  background: #EEEEEE;
  vertical-align: middle;
  text-align: center;
  overflow:auto;
}

.jma_mobile_footer {
  color: #FFFFFF;
  background: #AAAAAA;
  overflow: hidden;
  width: 100%;
  @media (orientation: portrait) {
    height:5dvh;
    font-size: 2.5dvh;
  }
  @media (orientation: landscape) {
    height: 10dvh;
    font-size: 6dvh;
  }
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML代码

<!DOCTYPE html>
<html lang="en" class="jma_mobile_html">

<head>
  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>TEST</title>
  <link rel="stylesheet" href="car.css" type="text/css">
</head>

<body class="jma_mobile_body">
  <div class="jma_mobile_title_center">MAIN TITLE
    <div class="jma_mobile_title_sub_center">Text as subtextline</div>
  </div>
  <div class="jma_mobile_page">
  </div>
  <div class="jma_mobile_footer">TEST - 2024-09-06</div>
</body>

</html>

核心问题 #

iOS 15.8.3的Safari对CSS嵌套语法支持不完善，嵌套在类中的@media规则无法被正确解析。

修改步骤 #

1. 提取全局媒体查询：将嵌套在类内的@media规则移到全局作用域，避免嵌套写法。
2. 单位兼容降级：为dvh单位补充vh回退，确保旧版系统能识别。
3. 优化viewport配置：添加viewport-fit=cover适配iOS状态栏，避免布局异常。

修改后的代码 #

CSS代码

.jma_mobile_html {
  height: -webkit-fill-available;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.jma_mobile_body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
}

.jma_mobile_title_center {
  color: #FFFFFF;
  background: #AAAAAA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow:hidden;
}

.jma_mobile_title_sub_center {
  color: #FFFFFF;
  background: #AAAAAA;
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  overflow:hidden;
}

.jma_mobile_page {
  background: #EEEEEE;
  vertical-align: middle;
  text-align: center;
  overflow:auto;
}

.jma_mobile_footer {
  color: #FFFFFF;
  background: #AAAAAA;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 全局媒体查询，避免嵌套 */
@media (orientation: portrait) {
  .jma_mobile_title_center {
    height:8vh;
    height:8dvh;
    font-size: 4vh;
    font-size:4dvh;
  }
  .jma_mobile_title_sub_center {
    font-size:1.5vh;
    font-size:1.5dvh;
  }
  .jma_mobile_page {
    height:87vh;
    height:87dvh;
    font-size: 3vh;
    font-size:3dvh;
  }
  .jma_mobile_footer {
    height:5vh;
    height:5dvh;
    font-size: 2.5vh;
    font-size:2.5dvh;
  }
}

@media (orientation: landscape) {
  .jma_mobile_title_center {
    height: 10vh;
    height:10dvh;
    font-size: 5vh;
    font-size:5dvh;
  }
  .jma_mobile_title_sub_center {
    font-size: 2vh;
    font-size:2dvh;
  }
  .jma_mobile_page {
    height: 80vh;
    height:80dvh;
    font-size: 5vh;
    font-size:5dvh;
  }
  .jma_mobile_footer {
    height: 10vh;
    height:10dvh;
    font-size: 6vh;
    font-size:6dvh;
  }
}

HTML代码

<!DOCTYPE html>
<html lang="en" class="jma_mobile_html">

<head>
  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>TEST</title>
  <link rel="stylesheet" href="car.css" type="text/css">
</head>

<body class="jma_mobile_body">
  <div class="jma_mobile_title_center">MAIN TITLE
    <div class="jma_mobile_title_sub_center">Text as subtextline</div>
  </div>
  <div class="jma_mobile_page">
  </div>
  <div class="jma_mobile_footer">TEST - 2024-09-06</div>
</body>

</html>

验证说明 #

修改后代码可在iOS 15.8.3的iPhone SE移动端Safari中正常识别横竖屏状态，同时保持在其他浏览器和平台的兼容性。

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