Saturday, December 30, 2023
HomeiOS Developmenthtml - ipad ignores media queries with max-aspect-ratio, how you can workaround?

html – ipad ignores media queries with max-aspect-ratio, how you can workaround?


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>



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments