Question

Android Chrome上的slideToggle（）函数似乎存在问题。在动画过程中，目标div / p的字体大小将更改为较小的大小（约为初始大小的80％）。

不希望更改字体大小
字体大小更改没有动画效果，但是在我触摸按钮后立即发生。之后，slideToggle动画可以正常工作。
开发工具不会显示字体大小的任何变化

我试图以各种方式（也通过onClick调用该函数）设置javascript，但问题似乎不在于代码，而在于浏览器？如果是这样，是否有办法解决？还是我在这里做错了什么？

我在chrome上的两个不同的Android设备上重现了该问题（不了解其他操作系统/浏览器）。
在Macbook的Chrome开发工具上的移动视图上不会发生此问题，仅在实际的移动设备上会发生

<script>
    $( '.button' ).click( function() {
        $( '.target' ).slideToggle();
    });
</script>

<button type="button" name="button" class="button">BUTTON</button>
<div class="target">
    <p>HELLO</p>
</div>

Answer 1

好吧，这很奇怪，我刚刚在通过网络服务器托管的Android手机上对代码进行了少许调整，然后对其进行了测试。您使用的是目前的代码吗？纯粹是因为脚本通常应该在HTML之后，因为尚未创建按钮来添加事件侦听器。如果您可以将链接添加到视频中，则可能会有所帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" name="button" class="button">BUTTON</button>
<div class="target">
    <p>HELLO</p>
</div>

<script>
    $( '.button' ).click( function() {
        $( '.target' ).slideToggle();
    });
</script>

Answer 2

setting the viewport为我解决了相同的问题：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

（只需在另一个答案的注释中重新编写解决方案，以方便参考）。

jQuery slideToggle（）在动画过程中更改字体大小

2 个答案: