为什么 webkit 浏览器会缩小手机上的一些浮动元素？
Why do webkit browsers shrink some floating elements on mobiles?
我正在尝试为 Web 应用程序创建一个简单的响应式布局 (JSFiddle)，但在移动 webkit 浏览器上遇到渲染问题。
它们以（对我而言）不可预测的方式缩小了一些浮动元素。
布局在 Android 上适用于桌面浏览器、Firefox 和 Opera，但在 Android 上不适用于 Chrome，在 iOS 上似乎是 Safari（使用 Kitkat 智能手机测试并在 [=34 中模拟） =] 对于 Android 和 Apple 设备：
Simulated Nexus 4 Rendering
（蓝色和橙色区域的文本应与白色区域的一样大）
似乎我使用哪个 CSS 属性并不重要；我尝试了 CSS 表格、框、浮动框、弹性框和最后的 -webkit-框 - 所有结果都相同：页眉和页脚太小
这是 Google 脚本项目的一部分，所以不幸的是我无法控制视口元标记，但快速尝试使用本地文件和 <meta name="viewport" content="width=device-width, initial-scale=1"> 标记并没有解决问题或者.
有没有人以前遇到过这种情况并且知道如何解决它？
谢谢！
moeffju 的回答似乎与您的问题相关：
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
使用 Chrome 模拟器并将此 属性 添加到白色区域中的 P 元素，使文本符合 CSS 字体大小。 （它使白色文本 变小 就像蓝色和橙色一样，而不是变大。原来的尺寸很小）。
请参阅我链接到的原始答案的评论，以了解其工作原理的解释，以及有关使用此修复程序可能出现的问题的一些警告。我已经在几个网站上成功地使用了它，但没有在 Safari 上进行非常全面的测试。
我正在尝试为 Web 应用程序创建一个简单的响应式布局 (JSFiddle)，但在移动 webkit 浏览器上遇到渲染问题。
它们以（对我而言）不可预测的方式缩小了一些浮动元素。
布局在 Android 上适用于桌面浏览器、Firefox 和 Opera，但在 Android 上不适用于 Chrome，在 iOS 上似乎是 Safari（使用 Kitkat 智能手机测试并在 [=34 中模拟） =] 对于 Android 和 Apple 设备：
Simulated Nexus 4 Rendering
（蓝色和橙色区域的文本应与白色区域的一样大）
似乎我使用哪个 CSS 属性并不重要；我尝试了 CSS 表格、框、浮动框、弹性框和最后的 -webkit-框 - 所有结果都相同：页眉和页脚太小
这是 Google 脚本项目的一部分，所以不幸的是我无法控制视口元标记，但快速尝试使用本地文件和 <meta name="viewport" content="width=device-width, initial-scale=1"> 标记并没有解决问题或者.
有没有人以前遇到过这种情况并且知道如何解决它？
谢谢！
moeffju 的回答似乎与您的问题相关：
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
使用 Chrome 模拟器并将此 属性 添加到白色区域中的 P 元素，使文本符合 CSS 字体大小。 （它使白色文本 变小 就像蓝色和橙色一样，而不是变大。原来的尺寸很小）。
请参阅我链接到的原始答案的评论，以了解其工作原理的解释，以及有关使用此修复程序可能出现的问题的一些警告。我已经在几个网站上成功地使用了它，但没有在 Safari 上进行非常全面的测试。