Readable websites on an iPhone

See this post on Scripting News for a tip that shows how to make a website readable on an iPhone, without forcing the reader to adjust the screen resolution.

To take full advantage of Flickr, you should use a JavaScript-enabled browser and
install the latest version of the Macromedia Flash Player.

Comments

Anthony Baker says:

Awesome!

I was thinking about the whole Safari thing. Seems to me that the more Apple can keep the phone and desktop browsers the same, the easier it will be to develop against (offering hacks like yours) and, if the phone becomes a booming success, the more it will drive businesses to pay attention to testing against Safari.

Ideally, a smart move on their part -- all predicated on the two items mentioned above, of course.

Really looking forward to reading the Digg river and NY Times river, btw. Before my Tungsten got a cracked screen, viewing those on wifi was amazing.
Posted 32 months ago. ( permalink )

Tom Morris says:

Nice. For CSS users, it seems like it might be possible to do User-Agent sniffing for the iPhone, and serve up a different stylesheet plus the meta hack.
Posted 32 months ago. ( permalink )

scriptingnews says:

I've gotten email pointing out that when you click on the story links they look no better than before. :-(
Posted 32 months ago. ( permalink )

joeclark says:

There’s no need for user-agent sniffing, a debased practice from the 1990s. Why doesn’t Safari support the handheld CSS media type?
Posted 32 months ago. ( permalink )

Tom Morris says:

'Debased' it may be (why not just say it's 'considered harmful' and avoid having to provide any reasons at all?), but sometimes rather useful. If Apple want to support the 'handheld' profile, that'd be even better - but since they seem to have introduced proprietary behaviour with 'meta viewport', I am not totally sure they are going to bother with the niceties of CSS.
Posted 32 months ago. ( permalink )

john f allsopp says:

Safari on the iphone supports media queries, which are compatible with current browsers.

As per Apple's developer docs (scant it must be said) you can do a Safari on iPhone only Style Sheet like this

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

the 'only' throws browsers which do support media based linking.

use a media query of

media ="screen and (min-device-width: 481px)"

browsers which support media but not media queries will see this as
media="screen" while those which do support media queries, if their device width is 481px or greater will use the style sheet for screened media, while the iphone will ignore it because its width is always less than 481px

It sounds a bit hacky but in fact this is how media queries were designed in terms of backward compatibility.

HTH

john
Posted 32 months ago. ( permalink )

Would you like to comment?

[?]

	scriptingnews' photostream
		4,783 uploads

1 person calls this photo a favorite

Additional Information

Some rights reserved Anyone can see this photo

Taken on July 1, 2007
Viewed 4,249 times

Add to your map

Yay location removed

...

(Some formats are OK.)

Or, remove it from the map.

Go to the map

You	Sign in \| Create Your Free Account
Explore	Places \| Last 7 Days \| This Month \| Popular Tags \| The Commons \| Creative Commons \| Search
Help	Community Guidelines \| The Help Forum \| FAQ \| Sitemap \| Get Help

Readable websites on an iPhone

Comments

Anthony Baker says:

Tom Morris says:

scriptingnews says:

joeclark says:

Tom Morris says:

john f allsopp says:

Would you like to comment?

scriptingnews' photostream

Additional Information