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

Question

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

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

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

以下是一个 sn-p 供参考，但该问题未在其中重现，因为它仅存在于移动环境中。

    $('.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 */
}