Right here is my html code. It’s supposed to indicate the h2 title, adopted by one line indicating wherein side ratio phase the browser is for the time being. It really works on Home windows 10 and Android, it really works in responsive browser mode once I choose Ipad because the listing of units (the road adjustments once I transfer from portrait to panorama), however on my Ipad professional I simply see the h2 title, not the rest. I up to date at this time (29 dec 2023) to the most recent model of IOS (17.2).
You’ll be able to view the consequence right here: http://fvila.fr/test_pure_html/test-max-asp-ratio.htm
How can I work round this to get it to work on Ipad? I couldn’t discover max-aspect-ratio in https://caniuse.com
<html>
<head>
<type>
p { show:none; }
@media (max-aspect-ratio: 1/4) {p.hidden1 {show:block}}
@media (min-aspect-ratio: 1/4) and (max-aspect-ratio: 1/2) { p.hidden2 {show:block;} }
@media (min-aspect-ratio: 1/2) and (max-aspect-ratio: 1) { p.hidden3 {show:block;} }
@media (min-aspect-ratio: 1) and (max-aspect-ratio: 1.5) { p.hidden4 {show:block;} }
@media (min-aspect-ratio: 1.5) and (max-aspect-ratio: 2) { p.hidden5 {show:block;} }
@media (min-aspect-ratio: 2) { p.hidden6 {show:block;} }
</type>
</head>
<physique>
<h2>Media question check</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>
</physique>
</html>
