Rotating an iOS device sideways can change the text size of your pages and ruin your layouts. This issue frequently happens with fixed position elements like navigation bars and menus. Once this happens, the only way to fix it is to refresh the page. Fortunately, there’s a way to stop unwanted text size changes before they happen.
Insert this code into your CSS:
html {
/* Prevent font scaling in landscape while allowing user zoom */
-webkit-text-size-adjust: 100%;
}
This code nullifies the font size adjustment in landscape by saying, Hey, browser. If you’re going to adjust the text size in landscape mode, adjust the text to 100% of its current size, or in other words, the same size.