Javascript 网站在更改div的显示属性时更改其字体大小（仅在手机上）

我写自己的网站是一种爱好（我知道的任何html/css/js都是自学的），但我遇到了一个我似乎无法真正理解的问题（因此我不知道如何解决它）。不幸的是，我自己无法处理/解决这个问题

我试着尽可能多地删除不需要的代码，将站点缩减到最低限度，使其仍然表现出不需要的行为。我为业余/黑客代码感到抱歉，毕竟我不是专业人士

是一个显示代码的JSFIDLE。它展示了我想要的行为：点击任何一个“文件夹”，它展开并显示“内容”。到目前为止，一切顺利

如果我现在将完全相同的代码加载到站点（我在这里使用的是netlify），它的行为仍与我希望的一样：

但是，如果我在移动浏览器上访问它（作为参考，我在Google Chrome、Firefox和Brave浏览器上尝试过，都是在Android上），我会得到一些我不想要的行为：

如果我展开一个文件夹，它会按预期工作，但如果我同时展开第二个文件夹，文件夹名称及其内容似乎会改变字体大小（它们会明显变大）。如果我关闭正常的一个并重新打开它，它的大小也会改变。作为参考

这就是它看起来的样子。 似乎我将display属性切换到

block

会将字体大小更改为其他大小，但我在整个css中只定义了一种字体大小

我真的不知道为什么会发生这种情况，我非常感谢任何能解释这种情况或为我指明正确方向的帮助

谢谢

---

编辑：我设法联系了一个第三方，他在他们的手机（iOS）上尝试了该网站，但该网站没有表现出相同的奇怪/不想要的行为。我不知道该如何处理这些信息。

答案完全不是，但是当使用Chromium DevTools中的移动模式时，即使在使用Chromium中给定的netlify链接的计算机上（在我的例子中是Ubuntu Linux；非android设备），也可以复制所描述的行为。也许通过这种方式复制它，有人会成为这种行为背后的原因

打开第二个文件夹时，字体大小确实设置为

42.073px

或类似值，具体取决于在移动模式中选择的响应模式。这只显示在DevTools的“Computed”选项卡中，但在“Styles”选项卡中没有此大小的规则。对不起，我看不出文本大小更改的任何明显原因

但是，关于HTML代码的一些注意事项（尽管下面的任何一项似乎都不能解决您的问题）：

• 最好将
  标记放在
  标记内，就在关闭
  之前。或者将它放在
  中，但请确保在页面加载后执行它。在
  或
  之外，您的
  有些不知所措–包括意外的副作用
• 你的
  标签也是如此。将其放入
  中
• 为了获得有效的代码，并减少甚至避免意外的副作用，请使用
  标记包围整个HTML代码，并在HTML开头定义doctype，例如
  。验证您的HTML，例如：

---

我可能最终找到了解决这种奇怪和意外行为的有效方法。在CSS的

正文

部分中，添加以下规则：

  font-size-adjust: none;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;

显然，这些规则并没有得到广泛的支持，它们可能会改变，或者在某个时候它们的支持会被放弃。一个只适用于Firefox，另一个只适用于基于Chromium的浏览器，还有一个似乎是基于Chromium的传统浏览器所必需的。见：

---

只有通过这三条规则，我才成功地阻止了移动Chromium、移动Firefox Quantum的字体缩放（旧的Firefox首先，感谢您的回答，看到有人可以看到/重新创建我的问题让我很放心，我开始担心这只是一个本地问题或其他问题。另外，感谢关于html格式的提示，我会在我的网站上更改它，因为这肯定是一种更好的方式。我必须承认我是mi的一员ndset的“如果它能工作，它就足够好了”到目前为止，所以这些提示非常感谢。我无法用语言表达我对你的感激之情！经过我的测试，它在我现在可以测试的任何浏览器（Chrome、Firefox和Android上的Brave）上的表现都与预期一样。我已经可以说我找不到这个解决方案，主要是因为我没有想到问题会出现在

主体
样式中。再次感谢，我在精神上接受了我无法修复的事实，并考虑了黑客的解决方法，所以这是一个令人欢迎的惊喜。我将进一步阅读rul并尝试维护它们。