Question

解决了它：

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

从纵向旋转到横向时，我有一个小的字体大小问题。在safari中测试响应模式时，字体大小工作正常，但在我的iPhone 5s上测试时，字体大小在纵向模式下工作正常，正确的字体大小，我设置的方式，转向横向更大的字体大小。导航显示正确的字体大小，但打开时它也会变大。所有字体大小都是在带有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; 
  }
}

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

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

1 个答案: