iPhone website version, recommend working in px or in %?

Question

I haven't done any iPhone version yet, so I have this question,

In order to be able to browse the website properly -even if the user turns 90º his phone:

Shall i CSS set with's in px or in % ?

Answer 1

If you are programatically targeting the iOS devices such as the iPhone & iTouch then i would use pixels opposed to percentages, but if you are not targeting such devices and want a one stop mobile website for all (most smart-phones) then i would consider using percentages.

you can specificy min-width max-width and min-device-width and max-device-width in your media queries.

Here is a little more about media queries and the combinations that you can do;

/* Target iPhone Portrait */
@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }

/* Target Android Portrait larger than 320px Width */
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }

/* Target iPhone Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }

/* Target Android Landscape */
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }