best way to style for ipad / iphone

I’m struggling with styling some website also for ipad / iphone / and use portret or landscape.

It doesn’t seem to be possible to style a page when using a ipad (768px) and give the holder/wrapper width 768px, then turn the ipad and give it different styling..
When i use this here below i can give a styling when i turn the ipad, but then the width for iphone isn’t correct when i turn that.



So basicly asking, what is the best way to style my website for iphone / ipad and also be able to change styling when turning the ipad/iphone?

#
works on this website for iphone 3, can’t test ipad
http://bransinanderson.com/

hi,

you will probably have to do a bit more changes than just css (image size for example...) but i recently had to do that sort of thing and went for the php solution detecting ipod/ipad os and then putting the right css. this can be easily done with a simple snippet

now, i wonder why you only care about iThings as there are many other mobile OS to deal with (in term of css the simplest way seem to use % instead of px for most your styles but that’s up to your taste), the really big difference between iCraps and the others being the non flash support (i had to deal with this too and serve mp4 videos instead of a flash player with flashvars to see the right videos)

have swing

I’m currently building sites using http://stuffandnonsense.co.uk/projects/320andup/
It takes longer to implement and you need to design your site accordingly.

Cheers

Thanks for ur answers,

@virtualgadjo
Yea i can do some overflow hidden css for images or a #div img{size here}.
Still don’t know how to use different css when use portret or landscape for ipad and iphone for example, i think it will pick the same css file. Need to test it.
It’s not only iThings, but it are the most important ones for me.

The problem with % is that the mockup / design is made 980px wide.

@cipa
Thanks for the link, I will be testing that.

Maybe i need to use a min- and max-width for the turning of the ipad landscape/portret for example or it can be used when use 769px css file for landscape and 768px form portret?


I will test. ->

Cool, the fast mockup looks like it works, http://tinyurl.com/3j7u4ug

the cipa 320andup is what im gona try, looks like it works great, also for landscape, need to use the min- / max-width.

You need to use CSS media queries and style your site from different resolutions, you can also try Lessframework which also uses a similar approach do a search for responsive web design you will find tons of tutorials out there.

I highl recommend Ethan Marcottes Responsive Web Design book it is invaluable on how to create and understand how and why responsive web design is important.

Good luck.