css for iPhones and Tablets

[cocoonfx]

Hi Guys

Could I recommend we have a section on coding/css for iPhones and smart phones etc... ??

[edbr]

a tutorial would be good, and maybe a sticky link to it in the existing css forumI think

[Corrosive]

JC has tackled the basics here; http://www.dreamweaverclub.com/mobile-friendly.php and there is some good stuff about it on his site. Perhaps a board would be good though as I have been playing with it recently and it seems like a bit of a minefield!

[cocoonfx]

Minefield I think you're right. I had a play last night on my site my original css works perfectly in on an iphone but I thought about creating a mobile.css and get the browser to detect the iPhone. I used the viewport

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

and it screwed the layout and even playing with the mobile.css it didn't work that well )

I will check out the tutorial but as soon as I trained myself I will possibly help with a tutorial.

[gentleone]

Originally Posted by cocoonfx

I thought about creating a mobile.css and get the browser to detect the iPhone. I used the viewport

The viewport meta tag is not for detecting an iPhone. It was created by Mobile Safari so that developers could control the viewports size and scale on an iDevice, but now it's supported by many other mobile browsers.
If you don't use this meta tag, then the mobile browser will sqeeze your, lets say 960px wide website, into the small screen and than users can only read your content by pinching/zooming and horizontal scrolling.

If you need to detect specifically for instance an iPhone than this can be done with User Agent sniffing.

Developing only for the iPhone is not that difficult. Developing for a wide range of devices with their different browsers and capabilities is a pain in the *beep*, but on the other hand it's also challenging.

[edbr]

I was looking at this lately and on one site i tried the
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
and as a 3 column site it lost all the centre content, as a quick fix i used
<meta name="viewport" content="width=device-width, minimum-scale=0.6, maximum-scale=1.0">

and it was better. i was actually working for android rather than iphone, just some food for thought

[cocoonfx]

I have also found that using the max-width causes issues with apple devices and also using % with widths. I am a mac user and I can only simulate for iPhone and iPad and I found a client had a blackberry 9680 and the layout was screwed, even though the site sort of worked in iPhone. Anyone know of any good blackberry simulators as the one from RIM doesnt work! well on a mac )

[Corrosive]

I have a Torch if you need any layouts testing. Pretty much anything below that in the BB pecking order doesn't seem to honour the viewport meta tag anyway.

[cocoonfx]

I have found the viewport works well on iPhones and iPads however they put an extra margin so if you set content to the size of the site it should centre properly