How to make your website mobile today

It's 2010 and your users are on smartphones and iPads. Here's how to make sure your website is too

By Dori Smith, InfoWorld |  Internet, web development

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 {


Originally published on InfoWorld |  Click here to read the original story.
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness