为什么 webkit 浏览器会缩小手机上的一些浮动元素？

Question

我正在尝试为 Web 应用程序创建一个 simlpe 响应式布局 (JSFiddle)，并在移动 webkit 浏览器上进行渲染。
它们以（对我而言）不可预测的方式缩小了一些浮动元素。

布局适用于桌面浏览器以及 Android 上的 Firefox 和 Opera，但不适用于 Android 上的 Chrome 和看似 iOS 上的 Safari（在 Kitkat 智能手机上测试并在 Android 和 Apple 设备的 Chrome 中模拟）：
Simulated Nexus 4 Rendering
（文本蓝色和橙色区域应与白色区域一样大）

似乎我使用哪个确切的 CSS 属性并不重要。我尝试了 CSS 表格、框、浮点数、flex-boxes，最后是 -webkit-boxes - 结果都一样：页眉和页脚太小

这是 Google Script 项目的一部分，所以很遗憾，我无法控制视口元标记，但是快速尝试使用本地文件和 <meta name="viewport" content="width=device-width, initial-scale=1"> 标记也没有解决问题。
有没有人遇到过这种情况并知道如何解决它？

谢谢！

Answer 1

moeffju 的这个答案似乎与您的问题有关：

添加最大高度：999999px；到要防止字体增强的元素或其父元素。

https://stackoverflow.com/a/12965146/5297207

使用 Chrome 模拟器并将此属性添加到白色区域中的 P 元素使文本符合 CSS 字体大小。 （它使白色文本小 像蓝色和橙色一样，而不是大。原来的尺寸很小）。

请参阅我链接到的原始答案的 cmets，以了解其工作原理，以及有关使用此修复程序可能出现的问题的一些警告。我已经在几个网站上成功使用了它，但没有在 Safari 上进行非常彻底的测试。