在移动横向转换期间未保持字体大小

Question

我有一个非常简单的级联元素，其中单独的内容块在彼此之上淡入淡出。问题是 (1) 字体大小在转换期间没有保持不变，此外，(2) em 标签内内容的字体大小根本没有得到遵守。 此问题仅在移动设备的横向模式下出现。我无法在纵向模式下重现该问题，也无法在任何尺寸的桌面浏览器上重现该问题。

在fadeOut和fadeIn期间，p的字号显得更大。转换完成后，字体大小将设置为定义的 1em。有趣的是，em 的字体大小即使在转换后仍然保持较大，只有 p 的其余部分设置为定义的字体大小。

同样，这只发生在移动设备的横向模式下，不会发生在纵向模式下。在 Safari 和 Chrome 移动版本中测试。为什么为什么会这样？我以前从未遇到过这种情况。

下面是一个供参考的片段，但由于该问题仅出现在移动环境中，因此未在其中重现。

    $('.testimonials > p:first').show();
    
    setInterval(function () {
        $('.testimonials > p:first')
            .fadeOut(1500)
            .next()
            .fadeIn(1500)
            .end()
            .appendTo('.testimonials');
    }, 3500);

       .testimonials {
          margin:50px auto;
          margin-bottom: 120px;
          display: block;
          width:95%;
          max-width: 800px;
          position: relative;
        }
        .testimonial {
          font-size: 1em;
          width: 100%;
          position: absolute;
          display: none;
        }
        .testimonial em {
          font-size: 1em;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="testimonials">
        <p class="testimonial">
          Random text 11111111 - <em>quoted as saying</em>
        </p>
        <p class="testimonial">
          Random text 22222222 - <em>quoted as saying</em>
        </p>
        <p class="testimonial">
          Random text 33333333 - <em>quoted as saying</em>
        </p>
      </div><!--testimonials-->

Answer 1

试试这个 css

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

在移动横向转换期间未保持字体大小

Font size not maintained during transition on mobile landscape orientation

html

css

mobile

jquery

landscape