Geek asks and answers

Android Browser automatically resizes text

I have a project that displays 16px text font on 0.5em links on iPhone perfectly.

However, when I switch to the Android browser, the font of the text increases and my link positioning is twisted.

My links are in

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

statement.

Is there a way to prevent Android text resizing? Or is there a better solution to this?

EDIT:

I just realized that the browser for Android does not automatically scroll. Why is this so? Don't both iPhone and Android browsers use web kits as a base? Why are they so different though they use the same technology? Are there any additional attributes that I have to declare in CSS so that it works the same as the Safari counterpart?

+5
source share
4 answers

I had a similar problem. I had a design specifically designed for the Retina display, but there is actually a pixel density of 2 on the retina screen, so the pixel is not necessarily a pixel (mesh width: 320 pixels, retina: 640 pixels).

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

I'm not sure which design you are using, but I would play with the starting and maximum scale, try both .5 and 1 and see what you get.

+3
source

, iPhone:

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

iPhone:

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

, android. , .

+2

Android , :

target-densitydpi=device-dpi

Here's a good link to the same:

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

0
source

More articles:


All Articles