Friday, 20 April 2012

Handling the orientation of screens in web pages

As part of responsive design a web page should react to the device it is being displayed on and make the most of the available screen real estate accordingly. With the advent of HTML5 & CSS3 the media tag for stylesheet links has been extended to cope with minimum screen heights and widths. It has also been extended to include "orientation", the following header block correctly loads/references the relevant stylesheet for the orientation of the website you are viewing.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

This is functionality is live & dynamic; changing the orientation of an IPad whilst viewing a page that implements the above CSS will correctly change the CSS references depending upon whether you are now viewing the page in landscape or portrait. This also works on LCD monitors; even to the point of moving a web page between a dual screen desktop when one monitor is in landscape and the other portrait.

When working with browser windows that are not maximised this functionality even takes into account the width of the browser vs it's height. Dragging the size of the window, at an unknown preset ratio of browser window height vs width the loaded CSS will switch from portrait to landscape or vice versa.

Thanks to Smashing Magazine for the tip.