CODEWITHSUNDEEP
iphonehtmlcss
DShultz
DShultz

Reputation: 4541

Preserve HTML font-size when iPhone orientation changes from portrait to landscape

I have a mobile web application with an unordered list containing multiple items with a hyperlink inside each li:

My question is: how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accelerometer switches from portrait to landscape?

In portrait mode, I have the hyperlink font size set at 14px, but when I switch the device to landscape, it blows way up to 20px.

I would like the font-size to stay the same.

Here is the example code:

ul li a {
    font-size:14px;
    text-decoration: none;
    color: #cc9999;
}
<ul>
    <li id="home" class="active">
      <a href="home.html">HOME</a>
    </li>
    <li id="home" class="active">
      <a href="test.html">TEST</a>
    </li>
</ul>

Upvotes: 228

Views: 108185

Answers (9)

Radek Matěj
Radek Matěj

Reputation: 589

As of March 2019 text-size-adjust has a reasonable support amongst mobile browsers.

body {
  text-size-adjust: none;
}

Using viewport meta tag has no effect on the text size adjustment and setting user-scalable: no does not even work in IOS Safari.

Upvotes: 7

Matt Stevens
Matt Stevens

Reputation: 13343

You can disable this behavior through the -webkit-text-size-adjust CSS property:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

The use of this property is described further in the Safari Web Content Guide.

Upvotes: 488

Aman
Aman

Reputation: 441

The below code works for me. 

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

Try with clearing your browser cache if it does not work.

Upvotes: 3

Manu
Manu

Reputation: 879

You could also opt for using a CSS reset, such as normalize.css, which includes the same rule that crazygringo recommends:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

As you see, it also includes a vendor specific rule for the IE Phone.

For current information about the implementation in different browsers, refer to the MDN reference page.

Upvotes: 11

Dan
Dan

Reputation: 57881

As it was mentioned before, CSS rule

 -webkit-text-size-adjust: none

does no longer work in modern devices.

Fortunately, a new solution comes for iOS5 and iOS6 (todo: what about iOS7?):

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

You can also add , user-scalable=0 to turn off pinch zooming, so your website would behave like a native app. If your design brakes when user zooms, use this meta tag instead:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Upvotes: 14

Belyash
Belyash

Reputation: 792

In my case this trouble has been because I used CSS attribute width: 100% for HTML tag input type="text".

I changed value of width to 60% and add padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}

Upvotes: 0

crazygringo
crazygringo

Reputation: 1375

Note: if you use

html {
    -webkit-text-size-adjust: none;
}

then this will disable zoom behavior in default browsers. A better solution is:

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

This corrects the iPhone/iPad behavior, without changing desktop behavior.

Upvotes: 116

snobojohan
snobojohan

Reputation: 2235

Using -webkit-text-size-adjust: none; directly on html breaks the ability to zoom text in all webkit browsers. You should combine this with som media queries specific for iOS. For example:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Upvotes: 27

Guillaume
Guillaume

Reputation: 463

You can add a meta in the HTML header:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Upvotes: 9

Related Questions