iPad不识别max-aspect-ratio媒体查询，求可行解决方案

我写了一段HTML代码，原本应该显示h2标题和当前浏览器宽高比区间的提示文本。这段代码在Windows 10、Android设备，以及浏览器响应式模拟iPad模式下都能正常工作（横竖屏切换时提示内容会相应变化），但在升级到iOS 17.2的iPad Pro上，只能看到h2标题，其余提示内容完全不显示。我查了caniuse，没找到max-aspect-ratio相关的兼容性问题。

代码如下：

<html>
<head>
    <style>
p {  display:none; }
@media (max-aspect-ratio: 1/4) {p.hidden1 {display:block}}
@media (min-aspect-ratio: 1/4) and (max-aspect-ratio: 1/2) { p.hidden2 {display:block;}  }
@media (min-aspect-ratio: 1/2) and (max-aspect-ratio: 1) { p.hidden3 {display:block;} }
@media (min-aspect-ratio: 1) and (max-aspect-ratio: 1.5) { p.hidden4 {display:block;} }
@media (min-aspect-ratio: 1.5) and (max-aspect-ratio: 2) { p.hidden5 {display:block;} }
@media (min-aspect-ratio: 2) { p.hidden6 {display:block;} }
</style>
</head>
<body>
<h2>Media query test</h2>
<p class="hidden1">(max-aspect-ratio: 1/4)</p>
<p class="hidden2"> (min-aspect-ratio: 1/4) and (max-aspect-ratio: 1/2)</p>
<p class="hidden3"> (min-aspect-ratio: 1/2) and (max-aspect-ratio: 1)</p>
<p class="hidden4"> (min-aspect-ratio: 1) and (max-aspect-ratio: 1.5)</p>
<p class="hidden5"> (min-aspect-ratio: 1.5) and (max-aspect-ratio: 2)</p>
<p class="hidden6"> (min-aspect-ratio: 2)</p>
</body>
</html>

1. 替换分数为小数形式 #

iOS Safari在处理媒体查询中的分数形式宽高比时可能存在解析异常，把所有分数形式的比值换成小数即可修复：

p { display:none; }
@media (max-aspect-ratio: 0.25) {p.hidden1 {display:block}}
@media (min-aspect-ratio: 0.25) and (max-aspect-ratio: 0.5) { p.hidden2 {display:block;}  }
@media (min-aspect-ratio: 0.5) and (max-aspect-ratio: 1) { p.hidden3 {display:block;} }
@media (min-aspect-ratio: 1) and (max-aspect-ratio: 1.5) { p.hidden4 {display:block;} }
@media (min-aspect-ratio: 1.5) and (max-aspect-ratio: 2) { p.hidden5 {display:block;} }
@media (min-aspect-ratio: 2) { p.hidden6 {display:block;} }

2. 添加viewport元标签 #

确保页面在iPad上正确缩放，避免媒体查询基于错误的视口尺寸计算：
在<head>标签内添加：

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

验证逻辑 #

修改后测试横竖屏切换，确认每个宽高比区间对应的提示文本正常显示。

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