GetDotted Domains

Freeola Guides

 

Using CSS Media Queries to take advantage of Web Page Orientation

Last updated on by cjh

Using CSS Media Queries to take advantage of Web Page Orientation

CSS has come a long way from its early days of changing the colour and size of your text, and while it may have initially been designed to remove the presentational aspects from HTML (removing such elements as <font>, <b> and <centre>), it has evolved in to a pretty powerful coding language that’s used online for web sites and for web apps.

CSS Media Queries

One such evolution is the creation of the recently published CSS Media Queries Recommendation, a sub-set of the CSS 3 development cycle.

The initial and most common use of the CSS Media Query was to distinguish between a screen (monitor) and a printer, and to provide a different set of styles for each, which enabled a richer web browsing experience, while also providing a stripped out version of the page for printing.

Now, however, CSS Media Queries have progressed to allow web developers to target specific types of web media on multiple levels, such as TV’s, handheld devices, projectors and speech devices.

Not only that, but CSS Media Queries can drill down further, and target media aspects from the width and height of the device, the aspect ratio, the device resolution, and even the orientation of the device, which is what this little article is about.

Mobiles and Tablets

Only a couple years ago, web sites were mostly the domain of desktop and laptop computers. Mobiles certainly existed, but it was still a time of infancy for the device, and the tablet market was really in the early birthing stages.

Today, a mobile phone is capable of many things, and a tablet is quite a common device for people to browse the web from, because of its ease of use, portability and accessibility, tablets and mobiles are becoming the devices of choice for a quick browse of the Internet.

When it comes to web browsing, tablets and mobiles can be used in either the portrait or landscape orientation mode, and while the devices tend to cater for either orientation on their own, many offer you, the web developer, the opportunity of altering your web page design based on the current orientation of the device.

Device Orientation

The orientation of a device is defined by the way it is being held.

Portrait defines the use of the tablet or mobile device when it is held upright, where the length of the device is vertical.

Landscape defines the use of a tablet or mobile device when it is on its side, where the length of the device is horizontal.

Providing a Better Browsing Experience

While tablets and mobiles can redraw the web page automatically regardless of the orientation, the user doesn’t necessarily get a great user experience. In portrait mode they may find the content too squashed, or in landscape mode it stretched to much.

As the web developer, being able to distinguish which orientation is currently being used will allow you to make slight adjustments to how your page looks.

For example, you may want your five site links to appear at the top of the page in portrait mode, so the rest of the screen is filled with content. On the other hand, you may want those links to appear on the left of the page in landscape mode.

Or if you have a photo gallery, you may want your thumbnails to appear at the bottom the page in portrait mode, with the main photo filling the top of the tablet, while in landscape mode, you may prefer the thumbnails to be on the right.

Many web developers have many different ideas in their heads, and the above two examples may hit home with you, or be of no interest, but the fact is that the option is available to you on any tablet and mobile devices to alter the way a page looks depending on orientation, purely with a little CSS. The HTML of the page can stay the same, all you need to do is target the page based in its orientation.

CSS Orientation

You can apply different CSS styles to either the portrait or landscape mode by using the “media” attribute within the <link rel="stylesheet"> or <style> HTML element, or by using the @media or @import code blocks within the <style> HTML element of your web page, as seen in the following samples:

HTML <link> element, using the media attribute:

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

This method is for referring to an additional file that contains the CSS rules of the web page, where two separate files have been created to hold each of the different orientation target CSS rules. The browser selects the appropriate style sheet based on the media attributes value.

HTML <style> element, using the media attribute:

<style type="text/css" media="(orientation: portrait)">/* Portrait CSS */</style>
<style type="text/css" media="(orientation: landscape)">/* Landscape CSS */</style>

This method is for referring to CSS rules that are included within the web page, with each <style> element block contains CSS rules that would be applied depending on the orientation, with the browser selecting the appropriate style sheet based on the media attributes value.

HTML <style> element, using the @media rule:

<style type="text/css">
@media (orientation: portrait) { /* Portrait CSS */ }
@media (orientation: landscape) { /* Landscape CSS */ }
</style>

This method is for referring to CSS rules that are included within a single HTML <style> element block of the web page, allowing for multiple orientation CSS rules that would be applied depending on the orientation, with the browser selecting the appropriate style sheet based on the @media value.

HTML <style> element, using the @import rule:

<style type="text/css">
@import url(portrait.css) (orientation: portrait);
@import url(landscape.css) (orientation: landscape);
</style>

This method is for referring to CSS rules that are included within a single HTML <style> element block of the web page, allowing for multiple orientation CSS rules to be imported and be applied depending on the orientation, with the browser selecting the appropriate style sheet to import based on the orientation value within the corresponding @import rule.

Including CSS Orientation Rules

Each web developer has their preferred method of referencing their CSS, but the end result is the same, in that specific CSS rules can be set for the web page depending on if it is being help upright or on its side.

As a basic example, the code below shows how to include two CSS rules, one for the portrait mode, and one for the landscape mode. In portrait mode, the main heading (<h1>) text will be coloured red, while in landscape mode, the text will be coloured blue:

<html>
<head>
<title>Orientation Example</title>
<style type="text/css" media="(orientation: portrait)">
h1 { color: red; }
</style>
<style type="text/css" media="(orientation: landscape)">
h1 { color: blue; }
</style>
</head>
<body>
<h1>My Orientation Example Page</h1>
<p>This is my little orientation example page</p>
<body>
</html>

As mentioned above, a more common example might be to align some content to the left (or right) in landscape mode, while having it remain at the top of the page in portrait mode.

The example below shows how you might align a background image to the heading (<h1>) HTML element depending on the page orientation, such as having the image repeat itself along the top of the heading in portrait mode, or a down the left side of the heading in landscape mode:

<html>
<head>
<title>Orientation Example</title>
<style type="text/css" media="(orientation: portrait)">
h1 { background: url(heading.png) top left repeat-x; }
</style>
<style type="text/css" media="(orientation: landscape)">
h1 { background: url(heading.png) top left repeat-y; }
</style>
</head>
<body>
<h1>My Orientation Example Page</h1>
<p>This is my little orientation example page</p>
<body>
</html>

Working Without Orientation

As handy as this feature might be, there are of course many devices that do not support orientation, in which case,  the above examples would not apply to anything, which might cause your pages to be somewhat bland.

So, for the time being, the best way to make use of CSS Orientation is to provide it on top of a standard set of CSS page rules, by applying certain fonts, colours and layouts, and then adjusting those setting with extra CSS rules for known portrait and landscape users:

<html>
<head>
<title>Orientation Example</title>
<style type="text/css">
/* Standard CSS */
h1 { color: black; }
</style>
<style type="text/css" media="(orientation: portrait)">
h1 { color: red; }
</style>
<style type="text/css" media="(orientation: landscape)">
h1 { color: blue; }
</style>
</head>
<body>
<h1>My Orientation Example Page</h1>
<p>This is my little orientation example page</p>
</body>
</html>    

Live CSS Orientation Example

The examples above are meant only as an introduction to the concept and ability to define CSS based on device orientation.

If you have such as device, take a look at http://haignet.co.uk/html-css-orientation-web-page.htm and see if your device will offer up its orientation to this sample web page. If it will, you should see a slightly different result if you alter how you hold your device.

Giving It a Go

CSS Orientation might not be something you’d considered using before, but mobile and tablet users are quite demanding, expecting a seamlessly perfect browsing experience.

With CSS Orientation, you can make simple alterations to how your web pages look to one user who uses a tablet in portrait mode compared to another who uses it in landscape mode.

You wouldn’t have to define any major alterations in your designs, but as we know someone web developers are a lot more particular about how their pages come across you users, and CSS Orientation detection is one feature that designers and developers can use if they so chose to do so.


Did you find this article helpful?


Freeola & GetDotted are rated Five stars

Check out some of our customer reviews below:

View More Freeola Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.