Der zweite Blick Progressiv, links, analytisch

CSS for the iPad

The iPad is com­ing and the deve­l­o­pers alre­ady recei­ved the iPad Simu­la­tor. The new XCode beta also inclu­des Mobile Safari. You can use spe­ci­fic CSS for web­sites on devices like the iPad.

If you want to use a CSS modi­fi­ca­tion for the iPad (as I do), this is how you tell the iPad to use an addi­tio­nal CSS file:

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

Because most other and older brow­sers don’t know how to handle this type of media string they won’t inter­pret it. And even if that’s nevert­he­l­ess the case, you can ima­gine that it might even be a good thing that more 1024px-wide devices and screens ren­der the page with this CSS file. The ipad.css will be inter­pre­ted by the iPhone, too. So if you need some spe­ci­fic CSS also for the iPhone, you pro­ceed equally but with max-device-width: 480px.

This site shows how to imple­ment the rota­tion mode (por­trait or landscape).