Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Browser resizes text automatically

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?

like image 502
Kyle Yeo Avatar asked Jun 10 '12 05:06

Kyle Yeo


3 Answers

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.

like image 148
LOLapalooza Avatar answered Nov 01 '22 23:11

LOLapalooza


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/

like image 36
LeigerGaming Avatar answered Nov 02 '22 01:11

LeigerGaming


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.

like image 2
trebormf Avatar answered Nov 02 '22 00:11

trebormf