Android Browser resizes text automatically

Question

I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.

However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.

My links are in a

<p><a>[Link]</a></p>

statement.

Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?

EDIT:

I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?

I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart? — Kyle Yeo, Jun 10 '12 at 06:51
Can you show printscreens from both - Android and Phone to actually see the diffrence? :) — Sófka, Jun 18 '12 at 08:04
on my android device if you hold down the power button it gives u option to print screen - (i'm using gingerbread btw) — Suvi Vignarajah, Jun 20 '12 at 14:46
I'm actually creating another media query for this, its under 480 max-device-width. This works fine. Maybe its because my site is a more content heavy site, therefore scaling would be a problem across all browsers. — Kyle Yeo, Jun 20 '12 at 16:17

score 3 · Accepted Answer · answered Jun 18 '12 at 20:40

I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).

To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).

I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.

Perhaps not that weird given the values in the attribute, but this cut the viewport in half for me on both iOS and android, the left part of the page looks the same, but the right side is just blank :) — Adam Bergmark, Oct 14 '13 at 14:28

score 2 · Answer 2 · answered Jun 10 '12 at 05:28

2

If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.

This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

answered Jun 10 '12 at 05:28

LeigerGaming

504
1
4
17

thing is, i only have that px element in my body statement. the rest of my css media queries are all in ems. is that single px affecting the rest? i've tried changing the size, but it still stays the same. – Kyle Yeo Jun 10 '12 at 05:31
@RenoYeo Hmm. The addendum on that post I linked above suggests using percent (%) for the body element's font-size, rather than pixels (px). Doing so should mean that things scale nicely regardless of screen size. Does it help? – LeigerGaming Jun 10 '12 at 05:40
so 100% is actually 16px, right? i'm going to try, and tell you how it goes – Kyle Yeo Jun 10 '12 at 06:14
nope, makes my iphone text resize itself as well. now i'm having iphone and android link texts with huge sizes that displace itself. – Kyle Yeo Jun 10 '12 at 06:34

score 2 · Answer 3 · edited May 23 '17 at 12:05

I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:

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

An alternate value is described in another question, Font size issue with iPhone:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

Seems like one of these might prevent the android browser from resizing. Hope this helps.

score 0 · Answer 4 · answered Jun 22 '12 at 07:17

If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:

target-densitydpi=device-dpi

Here's a good reference on the same:

http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

Android Browser resizes text automatically

4 Answers4