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

Font-sizing issue when rotate from portrait to landscape(从纵向旋转到横向时的字体大小问题)

问题描述

已解决：

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

在从纵向旋转到横向旋转时，我遇到了一个小的字体大小问题。当在Safari中测试响应模式时，字体大小运行良好，但当在我的iPhone5s上测试时，字体大小在纵向模式下运行良好，正确的字体大小符合我设置的方式，转向横向更大的字体。导航显示了正确的字体大小，但是当打开它时，它也会变得更大。所有的字体大小都是用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; 
 }
}

推荐答案

尝试使用此媒体查询：

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

此外，您还可以组合此媒体查询以解决您的问题。

这篇关于从纵向旋转到横向时的字体大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！