FREN

#FF00AA


31 mar. 2010

“Preparing Your Web Content for iPad”

If you’ve specified viewport settings for your webpage in Safari on iPhone, verify that these same settings are suitable for Safari on iPad. Specifically, if you want the width of the viewport to match the width of the device, you should use the device-width constant instead of a hard-coded pixel value.

Safari on iPad uses the same <meta name=”viewport”> setting as on the iPhone — which means that, if you have set a viewport size for your blog, as I have, to optimize reading on an iPhone without having to make a completely separate version of the site, the iPad uses the same setting and ends up zooming your contents way too large.

What’s worse, my viewport size assumes that the site is displayed with the iPhone-specific CSS, which is set by media=”only screen and (max-device-width: 480px)” and is consequently not loaded on the iPad. So the viewport size on my blog ends up actually being too small for the contents, because the big vertical image on the right isn’t hidden. (And that’s a problem of its own as this image is set to position: fixed, which doesn’t work on iPhone OS.)

In the end, since I absolutely don’t want to sniff for the iPad’s user-agent string, I have to choose between removing the viewport size altogether, along with the custom CSS that went with it (and ultimately having to fake the position: fixed with Javascript, since the image isn’t hidden anymore), or having my site look horrible on the iPad — because Safari still ignores my html, body { width: 650px; }.

If you don’t have the standard 900-pixel–wide layout of every other news site, there’s no right way anymore to optimize the way it’s displayed on an iPhone, no other solution than to make an iPhone-specific version.

This sucks.

Vous voulez savoir quand je poste du contenu sur mon blog ? Il suffit de vous inscrire gratuitement à un agrégateur RSS (Feedly, NewsBlur, Inoreader, …) et d'ajouter www.ff00aa.com à vos flux (ou www.garoo.net pour vous abonner à tous les sujets). On n'a pas besoin de newsletters, pas besoin de Twitter, le RSS existe toujours.

Mentions légales : ce blog est hébergé par OVH, 2 rue Kellermann, 59100 Roubaix, France, www.ovhcloud.com.

Les données des visiteurs de ce blog ne sont pas utilisées ni transmises à des tiers. Les posteurs de commentaires peuvent demander leur suppression par e-mail.

Tous contenus © de l'auteur ou couverts par le droit de citation.