3

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?

blueberryfields
  • 45,910
  • 28
  • 89
  • 168

1 Answers1

5

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).

Eric J.
  • 147,927
  • 63
  • 340
  • 553
  • 3
    You can also do this with CSS using @media rules. In CSS, you can use media rules with CSS to show different styles for different devices. http://goo.gl/U6c4i – Pixelmixer Nov 07 '11 at 20:35
  • @Dustin: Cool, had not looked at that before. Note that media rules are only fully supported for IE in IE9 and later (not relevant to the OP's question, but mentioning in case anyone stumbles across this later in a different context) http://msdn.microsoft.com/en-us/library/ms530813(v=vs.85).aspx – Eric J. Nov 07 '11 at 21:42