Question

I’m currently working on a PhoneGap app and I’m testing it on an Android Samsung Galaxy S2 but I want to target Android and iOS.

I want a fixed header and according to http://www.idev101.com/code/User_Interface/sizes.html headers on the iPhone are 44pts high. Since I don’t want to reinvent the wheel I thought it’s a reasonable size and I use it as well.

I have the following in my index.html (note the 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" />

And the following CSS

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

But when I deploy the App to my Phone and taking a ruler to measure it, the header is almost exactly 7mm high. But according to my math it should be about 15.5mm (1.552 = 44 * 2.54 * 1/72)

What have I done wrong? Or do I misunderstand the pt unit?

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/