javascript - 在 HTML 中为不同设备分辨率更改字体大小的最佳方法

Question

我正在为 Android 开发一个 phonegap 应用程序，并且我使用 jquery mobile 设计了 ​​UI。我想知道使用 css 或 javascript 动态更改不同设备的文本字体大小的最佳方法是什么。

Answer 1

媒体查询是您的朋友！

在您的 CSS 文档中，使用类似于以下的代码（示例适用于 iphone 3-4 + Retina）：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    p {
        font-size: 12px;
    }
}

您需要提供一些这样的查询来定位大多数设备（ipad、iphone 等），但这应该可以帮助您入门！

Answer 2

看看媒体查询。例如，这里的嵌套 CSS 规则仅适用于至少 500 像素宽的设备：

@media (min-width:500px) {
    #main {
        font-size: 15pt;
    }
}