Skip to main content

Posts

Showing posts from 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.<linkrel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <linkrel="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 LC…