从纵向旋转到横向时的字体大小问题

Question

解决了：

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

从纵向旋转到横向时，我遇到了一个小的字体大小问题。在 safari 中的响应模式下测试时，字体大小工作正常，但在我的 iPhone 5s 上测试时，字体大小在纵向模式下工作正常，按照我设置的正确字体大小，转向横向更大的字体大小。导航显示正确的字体大小，但打开时它也会变大。所有的font-sizing都是用px在body标签上完成的，不需要单独指定或者使用em、rem等。找不到问题出在哪里。再次在响应模式下 Safari 一切正常。

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

Answer 1

尝试使用此媒体查询：

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

对于 iPhone7，我使用这个媒体查询：

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

此外，您可以结合这些媒体查询来解决您的问题。