如何在移动浏览器中有效地使用动态 CSS？

Question

我正在尝试开发我的网络应用程序的移动版本，但我无法让它在多个浏览器上看起来都很好。我想如果我使用一些设备功能检测，我可以根据特定设备的屏幕尺寸动态生成宽度和字体大小。问题是移动浏览器似乎不会将 1px 的 CSS 宽度视为等于 1px 的屏幕宽度。在屏幕宽度为 320px 的 iPhone 上，一个 320px 宽的 body 标签只占页面的 1/4 左右。由于没有真正的参考框架，我很难说“在 320 像素宽的屏幕上，将字体设置为 16 像素”或类似的东西。是否有一些通用的经验法则可以用来计算 CSS 中的实际浏览器宽度，或者使用多种设备功能进行的一些计算可以帮助我更有效地生成动态 CSS？

谢谢，

迈克

Answer 1

尝试以相对单位定义大小和字体粗细。我会给 % 和 em 一个机会。许多移动浏览器试图缩小所有内容，以便很好地呈现普通网站。您可能会发现您需要特殊的元标记等来控制这些浏览器。