0

I am testing a mobile site with 2 iPhones. When I rotate 1 into landscape mode, the text resizes (desired). When I rotate the other into landscape mode, the text does not resize (not desired)

I have tried using the -webkit-text-size-adjust style, but the same behavior occurs

html, body, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

My head tag

<head>

    <meta charset="utf-8">

    <title>Site</title>

    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" href="style.css">

</head>

Is there some setting that can be changed to always resize text? Should I revisit my meta info for mobile?

Edit: 

iPhone1 = iPhone 4 Verizon running iOS 4.2.6
iPhone2 = iPhone 4 AT&T running iOS 4.3.5

Thanks

Dan
  • 3,264
  • 5
  • 33
  • 58
  • Are they both running the same version of iOS? Are they the same model? What model(s) and version(s) are they? – Moshe Aug 09 '11 at 17:41
  • Here's a [simpler solution](http://stackoverflow.com/a/12585002/557810), if *all* you're trying to fix is the text resizing. – inko9nito Nov 28 '12 at 16:58

1 Answers1

4

device-width always refers to width in portrait mode, so width=device-width will scale the viewport in landscape mode. This is a quirk of the iPhone (and I think iPad too). Seems a bit dumb, but this is how apple have done it.

So just use:

<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0">

Or better this, which will still allow the user to scale if they want to:

<meta name="viewport" content="initial-scale=1.0">
Seb
  • 56
  • 4