CODEWITHSUNDEEP
htmlcssiossafari
user2359928
user2359928

Reputation: 19

Problem with usable screen height in landscape - iOs Safari

need some help with a website I'm working on. Portrait mode on Android looks like this:

portrait Android

Now, landscape, no css change:

landscape Android

No problem whatsoever. Follow me to the next screenshot illustrating what happens on iOs Safari/Chrome in portrait mode. Everything fine:

portrait iOs

Landscape mode goes to "fullscreen" since it's an SE so I figured the screen, being quite small, goes full screen and that still looks fine.

landscape iOs

I can scroll through the content no problem. However, when I click a link to go to another page this happens:

broken landscape iOs

The behavior of the page is quite simple: the scrollable content is inside a div which is the rounded one which mustn't move during scrolling. What happens is that the rounded div is set to be 100% height of the screen and when top and bottom navbars appear on iOs, the rounded div won't change its height to adapt to the usable screen part.

body css is as following:

body {
margin: 0; 
height: 100%; 
overflow: hidden; 
-webkit-text-size-adjust: 100%; }

while rounded corners div is managed like this:

.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }

Any ideas on how to make the height right everytime the usable screen size changes?

Thank you

Upvotes: 0

Views: 3056

Answers (1)

OMGDrAcula
OMGDrAcula

Reputation: 1064

So sadly iOS has been notorious for this type of stuff for what seems years. First it was the top address bar, and now it is the browser menu. So you have a couple options. YOu can set a media query for landscape and shorten the height of that container and just have it scroll if you need. Could probably drop font-size too. Or there are a couple options in this article that might help.

You could also try 100vh instead as well. As that will make it the full height of the available viewport which I have seen at times act the way I needed it to vs 100% height.

https://www.eventbrite.com/engineering/mobile-safari-why/

Upvotes: 1

Related Questions