css - Phonegap 使用 pt 而不是 px

Question

我目前正在开发一个 PhoneGap 应用程序，我正在 Android Samsung Galaxy S2 上对其进行测试，但我想针对 Android 和 iOS。

我想要一个固定的标题，根据iPhone 上的http://www.idev101.com/code/User_Interface/sizes.html44pts标题很高。因为我不想重新发明轮子，所以我认为它的大小是合理的，我也使用它。

我的 index.html 中有以下内容（注意target-densitydpi=device-dpi）

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

和下面的CSS

header {
    height:40pt;
    padding:2pt 0;
}

但是当我将应用程序部署到我的手机并用尺子测量它时，标题几乎完全7mm高。但根据我的数学，它应该是15.5mm（1.552 = 44 * 2.54 * 1/72)

我做错了什么？还是我误解了pt单位？

Answer 1

Don't use pts for anything but print. It is specifically for print as 72pts = 1 inch. Use %, px, or ems.

Here's a good article with a roundup of the different units and their uses. http://css-tricks.com/css-font-size/

Answer 2

检查像素密度，例如

var devicePixelRatio = window.devicePixelRatio || 1;
alert(devicePixelRaio);