Fix font size on Mobile Safari (iPhone), where text is displayed inconsistently, and some fonts are larger than others?

Question

Our site displays inconsistent font sizes on mobile Safari - and, as far as we can tell, only Mobile Safari. This really guarded us.

We analyzed the site with Firebug, and the wrong areas inherit the correct styles, but the fonts are still displayed with the wrong sizes.

1) Visit http://www.panabee.com .

2) Perform a domain name search.

In boxes on the left side incorrect font sizes are displayed. The font size must match the font size on the right side (both the window title and the copy of the window). For example, the names Variations and Twitter are much larger than the alternate endings.

Any clue why?

Answer 1

Mobile Safari (e.g. Chrome for Android, Mobile Firefox, and IE Mobile) increases the font size of wide blocks (always), so if you double-tap to zoom in on this block (which corresponds to the block width of the screen), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none ), he will not be able to do this, and therefore, when the user double-clicks to enlarge on large blocks, the text will be unclearly small; users will be able to read it if they zoom in, but then the text will be wider than the screen, and they will have to pan horizontally to read each line of text!

• Ideally, you will fix this using Responsive Web Design methods so that your design adapts to the size of the mobile screen (in this case you will no longer have very large blocks, so mobile browsers will no longer change the font size).

• If this is not an option, and you are stuck with maintaining a desktop site for mobile users, then see if you can customize your design so that none of your blocks of text are larger than the width of the mobile device’s device (for example, 320 pixels for many portraits) (you can use css for mobile devices so as not to affect desktop browsers), then Mobile Safari will not need to increase font sizes (and browsers that update text, such as Android Browser and Opera Mobile, will also not need to change their layout).

• Finally, if you really need Mobile Safari to not adjust the font size, you can set -webkit-text-size-adjust: 100% , but only do so as a last resort , as this can make mobile users hard to read text since it will be too small, or they will have to pan from side to side after each line that they read. Please note that you should use 100% not none , because there are no unpleasant side effects in desktop browsers . There are also equivalent properties -moz-text-size-adjust and -ms-text-size-adjust for Mobile Firefox and IE Mobile.

Edit: for example, in your case, the simplest is probably the second alternative, so you can try adding the following CSS:

 /* Mobile browsers only */ @media only screen and (max-device-width: 480px) { table#all_results { width: auto; } td#main_box { width: 320px; } td#side_box { width: 320px; } } 

Although this is not ideal for a hardcode 320px like this; you can improve this by using a variety of CSS queries or get the width of the device from JavaScript.

Answer 2

Here is what ultimately worked (tested only on iPhone 4 tho):

 /* Mobile browsers only */ @media only screen and (max-device-width: 480px) { td#main_box { -webkit-text-size-adjust:100% } } 

We gave an answer to John, as his decision became the basis of this.

Probably not the most elegant answer, but it works.

Answer 3

-webkit-text-size-adjust: none; will result in you being unable to increase the number of mobile devices. Instead, use 100% .

Answer 4

 -webkit-text-size-adjust:none; 

will probably solve your problem.

 target-element { -webkit-text-size-adjust:80% } 

will continue to increase, but it saves it 80% less than the default web kits.