I cannot get @media (orientation) working on mobile Safari.
iOS 15.8.3, iPhone SE
The code I have written works the way it should on Chrome and Firefox, tested on Windows/Linux/OSX and Android. Also tested on Safari on OSX where it works the way it should.
If I skip using the @media query, that is just use normal height and font-size tags everything works but then I have no chance to know if the phone is in portrait or landscape mode.
The users for the code, when I get it right, will have a mixture of iOS and Android devices so I must be able to find out if it is portrait/landscape on various both iOS and Android devices
I tried to write the @media tag in many different ways but I cannot get it to work.
.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;
}<!DOCTYPE html>
<html lang="en" class="jma_mobile_html">
<head>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>TEST</title>
<link rel="stylesheet" href="car.css" type="text/css">
</head>
<body class="jma_mobile_body">
<div class="jma_mobile_title_center">MAIN TITLE
<div class="jma_mobile_title_sub_center">Text as subtextline</div>
</div>
<div class="jma_mobile_page">
</div>
<div class="jma_mobile_footer">TEST - 2024-09-06</div>
</body>
</html>3