Here is my html code. It is supposed to show the h2 title, followed by one line indicating in which aspect ratio segment the browser is at the moment. It works on Windows 10 and Android, it works in responsive browser mode when I select Ipad as the list of devices (the line changes when I move from portrait to landscape), but on my Ipad pro I just see the h2 title, not anything else. I updated today (29 dec 2023) to the latest version of IOS (17.2).
You can view the result here: http://fvila.fr/test_pure_html/test-max-asp-ratio.htm
How can I work around this to get it to work on Ipad? I could not find max-aspect-ratio in 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>
The page above is a simplified hello-world version of the problem, what I am actually trying to do is visible in http://fvila.fr
