Ipad игнорирует медиа-запросы с максимальным соотношением сторон, как обойти? ⇐ CSS

[Гость]

Вот мой HTML-код. Предполагается, что будет отображаться заголовок h2, за которым следует одна строка, указывающая, в каком сегменте соотношения сторон находится браузер в данный момент. Он работает на Windows 10 и Android, работает в режиме адаптивного браузера, когда я выбираю Ipad в списке устройств (линия меняется, когда я перехожу от портретной ориентации к альбомной), но на моем iPad Pro я просто смотрите заголовок h2, а не что-то еще. Сегодня (29 декабря 2023 г.) я обновился до последней версии iOS (17.2).

Результат можно просмотреть здесь: http://fvila.fr/test_pure_html/test-max-asp-ratio.htm

Как обойти эту проблему, чтобы она работала на iPad? Мне не удалось найти максимальное соотношение сторон на https://caniuse.com
.
п {дисплей: нет; } @media (максимальное соотношение сторон: 1/4) {p.hidden1 {display:block}} @media (минимальное соотношение сторон: 1/4) и (максимальное соотношение сторон: 1/2) { p.hidden2 {display:block;} } @media (минимальное соотношение сторон: 1/2) и (максимальное соотношение сторон: 1) { p.hidden3 {display:block;} } @media (минимальное соотношение сторон: 1) и (максимальное соотношение сторон: 1,5) { p.hidden4 {display:block;} } @media (минимальное соотношение сторон: 1,5) и (максимальное соотношение сторон: 2) { p.hidden5 {display:block;} } @media (минимальное соотношение сторон: 2) { p.hidden6 {display:block;} } Тест медиазапроса (максимальное соотношение сторон: 1/4)

(минимальное соотношение сторон: 1/4) и (максимальное соотношение сторон: 1/2)

(минимальное соотношение сторон: 1/2) и (максимальное соотношение сторон: 1)

(минимальное соотношение сторон: 1) и (максимальное соотношение сторон: 1,5)

(минимальное соотношение сторон: 1,5) и (максимальное соотношение сторон: 2)

(минимальное соотношение сторон: 2)

Страница выше представляет собой упрощенную версию проблемы hello-world. То, что я на самом деле пытаюсь сделать, видно на http://fvila.fr