Font-sizing issue when rotate from portrait to landscape

Question

solved it:

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

I have a small font-sizing issue when rotating from portrait to landscape. When testing on responsive mode in safari the font-sizing is working fine, but when testing it on my iPhone 5s the font-size works fine in portrait mode, right font-size the way i set, turning to landscape bigger font-size. The navigation shows the right font-size, but when opening it also changes bigger. All the font-sizing is done on the body tag with px, don't need to specify it separately or use em,rem etc. Can't find where the problem is. Again in responsive mode Safari everything is working.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: helvetica, arial, sans-serif;
  font-size: 23px;
  font-weight: normal;
  text-align: left;
  line-height: 1.2;
  color: black;
}

h1, h2 {
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media screen and (max-width: 1112px) { /* all after this breakpoint size to 20px */
body {
  font-size: 20px;
 }
}

@media screen and (max-width: 1024px) {  /* all after this breakpoint size to 18px */
body {
  font-size: 18px; 
 }
}

Alexander Z Alexander Z · Accepted Answer · 2018-01-24T14:33:28

Try to use this media queries:

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 1025px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 1025px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 1025px),
only screen and (                min-resolution: 192dpi) and (max-width: 1025px),
only screen and (                min-resolution: 2dppx)  and (max-width: 1025px) {
  body {
    font-size: 18px; 
  }
}

For iPhone7 I use this media query:

@media only screen 
and (device-width : 375px) 
and (-webkit-device-pixel-ratio : 3) {
  body {
    font-size: 18px; 
  }
}

Also, you can combine this media queries to resolve your issue.

Font-sizing issue when rotate from portrait to landscape

1 Answers