How to Avoid iOS Automatic Font Size Adjustment

How to avoid iOS automatic font size adjustment?

Had a lot of trouble tracking it down, but: it’s the -webkit-text-size-adjust property in CSS.

Values:

• Percentage (of default size), e.g. 120%, or 100%
• auto (the default)
• none – if auto isn’t working for your page. However this often causes problems with zooming. Use 100% instead. For example, open Safari on your desktop and zoom the page (Command-Plus) – your text won’t be enlarged, even though the entire page has zoomed! Don’t use none!

Note that these can be applied not just at the page level but at the element/widget/container level.

(I would not just specify a value of 100% for my website unless I was damn sure it was already optimized for small screens, and never none since it causes problems.)

---

Please note that in Firefox Mobile (e.g. for Android and Firefox OS) there is a similar property, -moz-text-size-adjust, documented here. Thanks to Costa for pointing this out.

---

Update, 10 years later: This MDN page is probably best for checking what browsers' current compatibilities and vendor prefixes are for this property.

CSS: how to do away with automatic rescaling of font-size on Safari

It's to do with font sizing you use apparently, on this site I use the following css:

html, body
{
    font-size: 100%; /* equivalent to 16px */
}

for the style sheet that effects the fonts for mobile I only put sizes that are larger than 16px for the sake of peoples eye sight, eg

 h2
{
  font-size:1.5rem; 
  /* notice the use of rem as compared to em - I don't use px for font sizes so I don't know about that */
}

http://www.awri.com.au/research_and_development/metabolomics_facility/

FYI my meta tag is:

<meta name="viewport" id="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />

iPhone/iPod - prevent font-size-changing

You may need to use extra selectors but the following should do the trick.

html,body { -webkit-text-size-adjust:none; }

So that this rule doesn't prevent text resizing in WebKit desktop browsers (Chrome, Safari and soon Opera), wrap it in a CSS media query targeting the desired devices like so:

/* iPhone, portrait & landscape. */
@media all and (max-device-width: 480px) {
    html,body { -webkit-text-size-adjust:none; }
}
/* iPad, portrait & landscape. */
@media all and (min-device-width: 768px) and (max-device-width: 1024px) {
    html,body { -webkit-text-size-adjust:none; }
}

Font size rendering inconsistencies on an iPhone

To improve on Lukasz's idea slightly, try using the following rule in your CSS:

body {
    -webkit-text-size-adjust: 100%;
}

Using the value '100%' instead of 'none', allows all other Webkit-based browsers to still resize text when using the zoom function while still preserving your original font size.

This issue is arising only in modern browsers like safari, opera with iPhone device.
Solution is

Append this style with the -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; with required class it works fine.
Example:
I want the condition to be applied only when request comes from mobile. So I have appended the complete navigation path that full fills my requirement.

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

or

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

}
both will work fine. No need to apply the styles for complete body

---

Related Topics