Home/ Questions/Q 6716413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:43:51+00:00

I am testing a mobile site with 2 iPhones. When I rotate 1 into

  • 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
    • 0