这是我的html代码。它应该显示h2标题，后面跟着一行指示浏览器当前的宽高比段。它适用于Windows 10和Android，当我选择iPad作为设备列表时，它在响应浏览器模式下工作（当我从纵向移动到横向时，线条会发生变化），但在我的iPad Pro上我只看到H2标题，我今天（2023年12月29日）更新到了最新版本的IOS（17.2）。
您可以在这里查看结果：http://fvila.fr/test_pure_html/test-max-asp-ratio.htm
我如何解决这个问题，让它在iPad上工作？我找不到最大宽高比在https://caniuse.com
<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>字符串
上面的页面是这个问题的一个简化的hello-world版本，我实际上试图做的是在http://fvila.fr中可见的
1条答案
按热度按时间r1zk6ea11#
看起来我发布这个太快了，更新已经下载，但没有安装。有了更新，问题就解决了！