CSS Layout for iPhone and other wireless browsers

**aschecht** · 05-31-2008, 01:06 AM

I'm planning to make a version of my site (www.icdmeister.com/site/) that's optimized for use on wireless browsers like the iPhone and smartphones.

My plan is to eliminate the left nav menu and footer altogether and to make the header a lot smaller.

Is it possible to use the same page with a different CSS file that includes a hidden attribute for the sections I'd like to eliminate?

Any resources or tips for creating CSS for these devices?

Andrew

**sandyk3** · 05-31-2008, 01:19 AM

Hi Andrew,

I found this code for your html file for iphones:

Code:

<link media=”only screen and (max-device-width: 480px)”
        href=”iPhone.css” type=”text/css” rel=”stylesheet” />

**aschecht** · 05-31-2008, 01:33 AM

Thanks Sandy. That looks useful. I've come across that before in some of my web searching. I wonder if I'll need to make separate stylesheets for several different mobile devices or if it makes more sense to design one that will be sufficient for all of them (but not optimal for any of them). I want to make the site iPhone friendly but don't want to exclude the non-iPhone wireless Internet PDA/phones.

A.

**Arenlor** · 05-31-2008, 01:33 AM

http://www.w3.org/TR/CSS21/media.html#media-types handheld seems to meet your need.
I think you'll also find WAP and WML something to look into. http://www.w3schools.com/WAP/default.asp

**sandyk3** · 05-31-2008, 02:48 PM

I also found this on about.com:

http://webdesign.about.com/od/wireless/a/aa070307.htm