Distinguish between iPad vs. iPhone from inside a web app?

Question

I'm looking to automatically alter styles and other visual elements to better take advantage of screen-space when running on an iPad vs. an iPhone.

How do I identify the device I'm running on (and, ideally, its screen resolution) from a web application?

Answer 1

You can detect the screen resolution using JavaScript . Additionally the platform (iPad / iPhone / iPod) is listed in the user agent (which you can also get via javascript ).

Examples of user agent strings:

Mozilla/5.0 ( iPad ; U; CPU OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

Mozilla/5.0 ( iPhone ; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

Mozilla/5.0 ( iPod ; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

Note that, in the wild, iDevice users sometimes mod their user agent string to something else (a small fraction of a percent of times in my experience).