Lesson 1: Detecting the screen size
During this lesson we will be building a mobile web page using HTML5, CSS and JavaScript. These three technologies we will be used for displaying the user view of the web page. In this first example we will display the available screen size and UserAgent of the current device.
The Challenge
The challenge within this lesson is to get the web page to display correctly in each different device. This rendering for each device will be done without any special coding beyond using standard HTML5 and CSS.
Creating simple HTML5 page
The displayed web page follows the HTML5 syntax and keeps the same content within the web page regardless of viewing device. The assigned cascading style sheet layout is determined by new HTML5 features. The two images below show the same page displayed in two different devices. The difference between the two displays is the browser has margins of 160px where the mobile device has margins of 5px.
 |
| Figure 1. Page displayed in a desktop browser. |
 |
| Figure 2. Same page displayed in mobile device. |
HTML5, CSS and JavaScript
What's changed
- !DOCTYPE only requires 'html' to be entered
- link tag has been extended
- meta tag name="viewport" allows the screen size to be set or determined. It can be set to an absolute value (ie. 600px) or the preferred device-width set by the manufacturer can be utilized. Setting the viewport is important for the subsequent application of the style sheet. Using the manufacturer preferred width can also be useful as devices often have optimum screen sizes and this also sets the screen size to remain constant in situation where the device allows zooming. Keep in mind zooming can be quite annoying (particularly when zooming out) as the screen size may grow and assign a different style sheet.
- the link tag has the addition of media queries, "media="only screen and (min-width:0px) and (max-width:399px)". This addition allows a different style sheet to be assigned depending on the screen size. There are many features to media queries and it is best to review these features in resources already written. http://www.w3.org/TR/css3-mediaqueries/
- Rendered the web page in a similar way as previous versions of HTML.
- Set the name="viewport" meta tag to the desired screen size.
- Add the media= media queries to provide the ability to load different CCS depending on the screen size (mobile device).
- Display the screen height, width and useragent.
- Alter the default margins from 160px for the default screen size (desktop browsers) to 5px for screen size > 400px (smartphones).
<!DOCTYPE html>
<head>
<title>Device Attributes</title>
<!-- meta tags -->
<meta name="viewport" content="width=device-width">
<!-- stylesheets -->
<link rel="stylesheet" href="/css/default.css" type="text/css">
<!-- phone -->
<link rel="stylesheet" href="/css/phone.css" type="text/css" media="only screen and (min-width:0px) and (max-width:399px)">
</head>
<body>
<h1>Device Attributes</h1>
<script type="text/javascript">
document.write("<h2>" + screen.availHeight + " x " + screen.availWidth + "</h2>");
document.write("<b>UserAgent:</b><br />" + navigator.userAgent.toLowerCase());
</script>
</body>
</html>
default.css
body {
width: auto;
margin-right: 160px;
margin-left: 160px;
}
phone.css
body {
width: auto;
margin-right: 5px;
margin-left: 5px;
}
Lesson Summary
In this lesson we have explored the two new HTML5 features that allow a different style sheet to be assigned depending on the size of the devices screen. It is important to both set the screen size using the meta tag "name=viewport" and set the style sheet depending on the screen size. The link tag attribute of "media=" allows for the different style sheet assignment.
Business Value
The business value is it enables the page content to remain the same regardless of device (and screen size). Over the long term this will save money and allow you to display existing content to new devices and screen sizes with very little effort.
