What CSS measurement unit should I use for the dimensions (widths, heights, margins, paddings, fonts, etc.) of an embedded HTML resource that should run both on iPhone and iPad?
Or should I use alternate CSS styles for iPhone/iPad instead?
I would like the content of this resource to look well on both devices, without having two create to versions of the same HTML.
Status bar: 19 px
Navigation bar: 43 px
Content window: 369 px
Toolbar: 48 px
Safari toolbar is 44 pixels.
http://www.iphonecompatible.net/design-tips-tools/iphone-safari-screen-dimensions-layout/
Nice tool: http://www.silisoftware.com/tools/screen.php
Try these
http://gigaom.com/apple/how-to-create-an-iphone-web-app/
http://line25.com/tutorials/design-and-code-a-cool-iphone-app-website-in-html5
The units are totally up to you. You can use whatever you are conversant with. I tend to use pixels because I find them most intuitive and easiest to measure on a computer screen. Also, during most webapp demos in Apple conferences, the unit used is pixels. It's pretty standard.
Checkout http://pxtoem.com to see conversions between units.
Cheers.