A little bit of script. My sample page is already using an external JavaScript file to handle its navigation menu, so only a little more code is necessary:
addEventListener(
'load', function() { resetPage(); androidSS(); }, false
);
addEventListener(
'orientationchange', function() { resetPage(); }, false
);These lines set up two event handlers: one to trigger when the page loads, and the other to trigger on orientationchange -- which is just what it sounds like. Both of them call the resetPage function:
function resetPage() {
var classVal =
(Math.abs(window.orientation)==90) ? "landscape" : "portrait";
document.getElementById("container").setAttribute("class", classVal);
setTimeout(scrollTo, 0, 0, 1);
}This function only has three lines, but it accomplishes a lot. The first line checks the window orientation; if it's +90 or –90, it sets classVal to landscape; otherwise, classVal is set to portrait. The second line tells container that it has a new class attribute, classVal. The two together are what let you know if the device is horizontal or vertical. The last line does a little bit of useful trickery: If you look back at Figures 2 and 3, much of the screen real estate is taken up by the address bar. Here, this last line tells the browser to window to scroll a tiny amount, which is enough to move the address bar out of the way.
That darn Droid. Did you notice the one bit of code I skipped in the onload handler? It was the call to the function androidSS:
function androidSS() {
if (navigator.userAgent.match(/Android/i)) {
var fileref = document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href","mobile3.css");
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}It looks to see if the browser is an Android device by checking if its userAgent contains the string Android. If it does, this function appends another style sheet, mobile3.css. There's no way to reliably use media queries to target all (and only) Android devices; instead, you should use JavaScript.
The result: Appropriate -- not identical -- displays across devices
While testing devices, I found a number of websites that documented how the Android should handle various situations. I tested sites with the Android emulator in addition to, of course, using an actual Android smartphone. I found that only on rare occasions did the docs match either of the displays, and that was still considerably more common than the emulator matching the phone's output. To get somewhat dependable results, I ended up duplicating several of the styles from mobile.css. Here's what's different:
h1, h2, h3, h4, h5, h6 {
font-family: "Droid Serif", Georgia, "Times New Roman", serif;
}
.landscape { font-size: 16px; }
.portrait { font-size: 24px; }The heading tags are set to fonts supported by the Android, as there's no need for iOS, WebOS, or BlackBerry support here. I also set the fonts for landscape and portrait to fixed pixel sizes to improve the chances of getting the desired results.
Don't get me wrong: The Palm and Apple devices had their share of fun quirks as well. Happily, there are free emulators for them, which you can get from the Palm Developer Center and Apple's iPhone Developer Program, respectively.