CODEWITHSUNDEEP
iphonecss
ilyo
ilyo

Reputation: 36391

Keeping font the same size when changing iphone orientation

I use this meta-tag

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

And I have a text that has no width limit.
The text is breaking up into two lines in portrait orientation, and when I rotate the device the text is scaled up: instead of keeping the same size and using the available space and placing the text in one line, like it should, it zooms the text and the text is still taking the two lines.

Why is that?

the CSS (compiled from SASS):

.text {color: #dee3d5; font-size: 16px; font-family: Helvetica; font-weight: bold; }
@media screen and (orientation:portrait) {
  .text { margin-top: 10px; margin-bottom: 10px; line-height: 20px; } }
@media screen and (orientation:landscape) {
  .text { margin-top: 5px; margin-bottom: 5px; line-height: 16px; } }

#thanx { border-bottom: solid 2px #dee3d5; padding: 10px; margin: 0 10px 12px 10px; }

Upvotes: 1

Views: 1678

Answers (1)

blake305
blake305

Reputation: 2236

You can disable this behavior by using -webkit-text-size-adjust: none;.

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

Upvotes: 3

Related Questions