css - Layout doesn't scale correctly in iOS/Safari

Question

I created a website where I used rem unit for measurement across the stylesheet for every element, so that when I needed to make it mobile responsive, I just had to reduce the root font size and everything else would scale down accordingly. One problem I encountered here is that iOS/Safari does not follow the styles exactly as it should be. The width and height of elements are a little larger than they should be in iOS, resulting in content being pushed out of the viewport. This is not the case with android, everything scales down properly there. I'm not using Bootstrap or any other framework, just plain CSS(SCSS).

For comparison, here are some screenshots on both android and iOS-
Comparison 1- Android and iOS
Comparison 2- Android and iOS

Also to be noted, layout doesn't break until and below 245px width, while the iPhone here was iPhone XS Max which has width over 400px I believe, so its definitely not because of smaller screen this is happening, its something else.

The root font size at various stages is defined like this-

html {
    font-size: 62.5%;
}

@media(max-width: 900px) {
    html {
        font-size: 55%;
    }
}

@media(max-width: 660px) {
    html {
        font-size: 45%;
    }
}

@media(max-width: 500px) {
    html {
        font-size: 35%;
    }
}

@media(max-width: 380px) {
    html {
        font-size: 30%;
    }
}

So, is there any way I can fix this?
Thanks in advance :)

question from:https://stackoverflow.com/questions/65908792/layout-doesnt-scale-correctly-in-ios-safari

Answer 1

Waitting for answers