A well known bug with mobile Safari is its inability to scale a website correctly when it’s width is greater than it’s height.
“If the height of your page is less than 1024px and the width is greater than 768px, the native zoom will cease to function as expected“.
If you are reading this it is probably because you have gone to view your website on your mobile device and ended up with an unscaled website complete with those lovely horizontal scrollbars! Many solutions across the web involve adding a viewport meta tag inside of your document head. These will work in some scenarios, whilst they can completely break a website in others. During my stuggles with the same issue, I came up with my own, super simple, CSS only solution!
Using a media query, we are able to define a minimum height for our body for tablet sized resolutions and below, whilst not affecting the desktop version in any way whatsoever.
@media screen and (max-width: 768px) {
body {
min-height: 1240px;
}
}
Add the above to your stylesheet, problem solved!
