Question

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; }

Answer 1

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

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