@Media (ориентация) не работает на Safari Mobile ⇐ IOS

[Anonymous]

Я не могу получить @media (ориентация) работать над мобильным сафари.
ios 15.8.3, iPhone se
Код, который я написал, так и должен, чтобы на Chrome и Firefox, протестированный на Windows/Linux/OSX и Android. Также протестировано на Safari на OSX, где он работает так, как должно. Если это портрет /ландшафт на различных устройствах iOS и Android < /p>
Я пытался написать тег @media разными способами, но я не могу заставить его работать. PrettyPrint-Override ">

Код: Выделить всё

.jma_mobile_html {
height: -webkit-fill-available;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}

.jma_mobile_body {
min-height: 100dvh;
min-height: -webkit-fill-available;
}

.jma_mobile_title_center {
color: #FFFFFF;
background: #AAAAAA;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
@media (orientation: portrait) {
height:8dvh;
font-size: 4dvh;
}
@media (orientation: landscape) {
height: 10dvh;
font-size: 5dvh;
}
overflow:hidden;
}

.jma_mobile_title_sub_center {
color: #FFFFFF;
background: #AAAAAA;
display: flex;
justify-content: center;
align-items: center;
@media (orientation: portrait) {
font-size:1.5dvh;
}
@media (orientation: landscape) {
font-size: 2dvh;
}
width:100%;
overflow:hidden;
}

.jma_mobile_page {
@media (orientation: portrait) {
height:87dvh;
font-size: 3dvh;
}
@media (orientation: landscape) {
height: 80dvh;
font-size: 5dvh;
}
background: #EEEEEE;
vertical-align: middle;
text-align: center;
overflow:auto;
}

.jma_mobile_footer {
color: #FFFFFF;
background: #AAAAAA;
overflow: hidden;
width: 100%;
@media (orientation: portrait) {
height:5dvh;
font-size: 2.5dvh;
}
@media (orientation: landscape) {
height: 10dvh;
font-size: 6dvh;
}
display: flex;
justify-content: center;
align-items: center;
}< /code>






TEST




MAIN TITLE
Text as subtextline


TEST - 2024-09-06

Подробнее здесь: https://stackoverflow.com/questions/789 ... ari-mobile