You can detect the screen dimensions of a web device via JavaScript by using screen.width and screen.height.

For an iPad one would think that screen.width would be 768 when being held vertically and 1024 when held horizontally. However, screen.width is always 768 regardless of the way you’re holding the iPad; likewise, screen.height is always 1024. The same is true for the iPhone/iPod Touch. screen.width is always 320 and screen.height is always 480.

The iOS devices support however the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode.

• window.orientation is 0 when being held vertically
• window.orientation is 90 when rotated 90 degrees to the left (horizontal)
• window.orientation is -90 when rotated 90 degrees to the right (horizontal)

There is also the orientationchange event that fires on the window object when the device is rotated.

The mediaquery “orientation” works also in current versions of Safari and Firefox on a desktop machine. Simply change the size of your browser window until the height is longer than the width and you get “portrait”.