I can’t get @media (orientation) engaged on cell Safari.
iOS 15.8.3, iPhone SE
The code I’ve written works the way in which it ought to on Chrome and Firefox, examined on Home windows/Linux/OSX and Android. Additionally examined on Safari on OSX the place it really works the way in which it ought to.
If I skip utilizing the @media question, that’s simply use regular peak and font-size tags all the things works however then I’ve no probability to know if the telephone is in portrait or panorama mode.
The customers for the code, after I get it proper, may have a mix of iOS and Android units so I have to be capable of discover out whether it is portrait/panorama on varied each iOS and Android units
I attempted to jot down the @media tag in many various methods however I can’t get it to work.
.jma_mobile_html {
peak: -webkit-fill-available;
peak: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
.jma_mobile_body {
min-height: 100dvh;
min-height: -webkit-fill-available;
}
.jma_mobile_title_center {
colour: #FFFFFF;
background: #AAAAAA;
show: flex;
flex-direction: column;
justify-content: heart;
align-items: heart;
width: 100%;
@media (orientation: portrait) {
peak:8dvh;
font-size: 4dvh;
}
@media (orientation: panorama) {
peak: 10dvh;
font-size: 5dvh;
}
overflow:hidden;
}
.jma_mobile_title_sub_center {
colour: #FFFFFF;
background: #AAAAAA;
show: flex;
justify-content: heart;
align-items: heart;
@media (orientation: portrait) {
font-size:1.5dvh;
}
@media (orientation: panorama) {
font-size: 2dvh;
}
width:100%;
overflow:hidden;
}
.jma_mobile_page {
@media (orientation: portrait) {
peak:87dvh;
font-size: 3dvh;
}
@media (orientation: panorama) {
peak: 80dvh;
font-size: 5dvh;
}
background: #EEEEEE;
vertical-align: center;
text-align: heart;
overflow:auto;
}
.jma_mobile_footer {
colour: #FFFFFF;
background: #AAAAAA;
overflow: hidden;
width: 100%;
@media (orientation: portrait) {
peak:5dvh;
font-size: 2.5dvh;
}
@media (orientation: panorama) {
peak: 10dvh;
font-size: 6dvh;
}
show: flex;
justify-content: heart;
align-items: heart;
}
TEST
MAIN TITLE
Textual content as subtextline