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

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

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

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

本文标题为:从纵向旋转到横向时的字体大小问题

基础教程推荐