Preserve HTML font-size when iPhone orientation changes from portrait to landscape

Lockin' down the font size

Sometimes, unsuspecting users and furious screen rotators can throw a wrench in your otherwise perfect web designs. Let's stop font size changes in their tracks!

html {
  -webkit-text-size-adjust: 100%; /* Prevents font inflation in landscape mode */ 
  -ms-text-size-adjust: 100%;     /* Ensures consistency for those IE loyalists */
}


This portion of CSS uses the -webkit-text-size-adjust property that maintains font size during orientation changes, thus avoiding an unexpected growth spurt in your text. It's like giving your text a firm handshake and politely asking it not to change size.

Additionally, you can take advantage of media queries to fine-tune the design per orientation scenario:

@media (orientation: landscape) {
  body {
    font-size: 3.5vw; /* Slightly smaller font-size for landscape, cause we like variety! */
  }
}


Nailing down responsive design

Ever heard of responsive typography? It's a lot more than merely stopping font sizes from dancing around. It's about making text easily readable across all mobile devices. No more squinting, zooming, or flailing in frustration!

Meta tags and their mysterious ways

Ever wondered about those meta tags in your HTML head? They may seem innocent, but they share a deep connection with your CSS:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


This particular tag sets the stage for responsive styling, defining the viewport width and initial scaling factor.

Standardising styles with CSS resets

For more predictable styling, use a CSS reset like normalize.css. This equalises default browser styles:

/* In your CSS file add this rule */
@import 'normalize.css'; /* Because normal is the new cool */


Exploring the test landscape

Ensure to test your solutions across different iOS devices and orientations. This will help you catch any hiccups in your design and give your users a smoother experience.

Advanced text scaling techniques

To go one step further, include CSS locks for a blend of flexibility and control. This allows your font size to scale within a specific range:

html {
  font-size: calc(16px + 6 * ((100vw - 320px) / 680)); /* Secret sauce for smooth scaling */
}


This formula keeps the font-size between 16px and 22px, gracefully scaling with viewport widths from 320px to 1000px.