- Hello World!
- Cordova Initialization
- Leveraging Cordova APIs
- Structuring Your Application's Code
- The Generated Web Application Files
- Responsive Design and Cordova
- Wrap-Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Responsive Design and Cordova
When a smartphone or tablet user rotates a device running a web or Cordova application, the browser needs to be able to react to the change and adjust the page’s properties. If it didn’t, when the browser window switches from a portrait to a landscape orientation, much of the available screen real estate would go unused. Designing a web application so it properly renders the application’s content across varying display widths or changing orientations is called responsive design.
Dealing with responsive design is a mobile web development topic, and I’ve always tried to limit these books to Cordova-related subjects only, but in this case it seemed to make sense to cover this topic. It didn’t fit in other areas of the book, so I decided to add it here.
There are several ways you can approach dealing with browser window size and orientation-related challenges. Bootstrap (http://getbootstrap.com/) and other front-end frameworks provide capabilities web developers can leverage to automatically scale and adjust their web applications’ content based on the available screen real estate. Additionally, there are capabilities in CSS and JavaScript that the web developer can leverage directly to accomplish this. I’m not going to cover third-party frameworks in this chapter; I’ll cover some of them in Chapter 17. What I will show you is how to build some of these capabilities into your own applications directly.
Using Cascading Style Sheets, an application has the capability to define specific CSS attributes that apply depending on the orientation of the device. In the following example, you see that I’ve defined two body styles, one that applies when the content is rendered on a screen while the orientation is portrait and the other when rendered on a screen while the orientation is landscape.
/* portrait */
@media screen and (orientation: portrait) {
/* portrait-specific styles */
body {
background-color: blue;
color: white;
}
}
/* landscape */
@media screen and (orientation: landscape) {
/* landscape-specific styles */
body {
background-color: red;
color: black;
}
}
In this case, just so I could demonstrate the changes cleanly, if you add this code to your web application (I’ll show you an example in a minute), you get white text on a blue background while in portrait orientation and black text on a red background in landscape orientation. For your own applications, you’ll want to adjust margins, borders, and so on based on the space available to your application.
Sometimes you want to do a little more when things change; to accommodate this, the web browser exposes events you can listen for and update your application’s UI as needed. Two events that matter for Cordova developers are orientationchange and resize. To add event listeners for these events to your Cordova applications, you can use the following:
//Set the orientation change event listener
window.addEventListener('orientationchange', onOrientationChange);
//For actions that don't fire the orientationchange event
window.addEventListener("resize", onResize, false);
With this code in place, when the device’s orientation changes, the onOrientationChange function is executed, and when the browser window resizes, the onResize function is executed. All your application has to do then is populate those two functions with the code you want executed when those particular events happen. In this example, I simply wrote some screen measurements to the page when the events fire.
To see all of this in action, I’ve created Example 2.7 shown in Listing 2.10. This application implements both the CSS queries and JavaScript events to create a web application that reacts to changes that occur while the application is running.
Listing 2.10 Example 2.7 Application index.html
<!DOCTYPE html>
<html>
<head>
<title>Example 2.7</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height" />
<style>
/* portrait */
@media screen and (orientation: portrait) {
/* portrait-specific styles */
body {
background-color: blue;
color: white;
}
}
/* landscape */
@media screen and (orientation: landscape) {
/* landscape-specific styles */
body {
background-color: red;
color: black;
}
}
</style>
<script src="cordova.js"></script>
<script>
br = "<br />";
function onBodyLoad() {
alert("Body Load");
document.addEventListener("deviceready", onDeviceReady, false);
//set the orientationchange event listener
window.addEventListener('orientationchange',
onOrientationChange);
//for devices that don't fire orientationchange
window.addEventListener("resize", onResize, false);
//Fire this at the start to set the initial orientation on
//the page
updatePage();
}
function onDeviceReady() {
navigator.notification.alert("Cordova is ready!");
}
function updatePage(msg) {
//Build an output string consisting of the different screen
//measurement values
var strongStart = "<strong>";
var strongEnd = "</strong>";
//var StrRes, or, sw, sh, ww, wh;
or = strongStart + "Orientation: " + strongEnd +
window.orientation + " degrees";
console.log(or);
strRes = or + br;
sw = strongStart + "Width: " + strongEnd + screen.width;
console.log(sw);
strRes += sw + br;
sh = strongStart + "Height: " + strongEnd + screen.height;
console.log(sh);
strRes += sh + br;
ww = strongStart + "Inner width: " + strongEnd +
window.innerWidth;
console.log(ww);
strRes += ww + br;
wh = strongStart + "Inner height: " + strongEnd +
window.innerHeight;
console.log(wh);
strRes += wh + br;
document.getElementById('appInfo').innerHTML = strRes;
}
function onOrientationChange() {
var msg;
console.log("Orientation has changed");
switch (abs(window.orientation)) {
case 90:
console.log("Device is in Landscape mode");
break;
default:
console.log("Device is in Portrait mode");
break;
}
updatePage();
}
function onResize() {
console.log("Resize event fired");
updatePage();
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Example 2.7</h1>
<p>This is a Cordova application that responds to device
orientation and resize events.</p>
<p id="appInfo">Waiting for Cordova Initialization to complete.</p>
</body>
</html>
Figure 2.7 shows the application running on an Android device in portrait orientation.
)
Figure 2.7 Example 2.7 Running on an Android Device in Portrait Orientation
Figure 2.8 shows the application running on an Android device in landscape orientation.
)
Figure 2.8 Example 2.7 Running on an Android Device in Landscape Orientation
There’s a whole lot more that can be said about responsive design and the tools that address it, but that’s way beyond the scope of this simple Cordova book. I’m a big fan of Smashing Magazine, and they’ve published some nice articles on web design and responsive design that might help you with this topic:
- www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
- www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
- www.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
There are a lot of web design and development books available that cover this topic in much more detail than I can. For example, take a look at the following Pearson titles:
- Dutson, Phil. Responsive Mobile Design: Designing for Every Device. Boston: Addison-Wesley, 2014.
- Kymin, Jennifer. Sams Teach Yourself Responsive Web Design in 24 Hours. Indianapolis, IN: Sams Publishing, 2014.