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

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 */
}