HTML and CSS Reference
In-Depth Information
intimate experience with the user by taking over the entire screen and immersing
them in your mobile web application's world.
Unfortunately, for all of the real-world advantages that the mobile web brings,
there are the same development and user experience stumbling blocks found in
the desktop environment that you will face while the platform continues to
develop.
Object/Feature Detection
The fragmentation in APIs available to developers on the mobile web can be a
problem. The most common solution to fixing discrepancies in APIs across
browsers has been to use JavaScript to detect browsers, or devices, and serve
different stylesheets or execute certain pieces of JavaScript depending on the
browser being used. This method is known as User Agent (UA) sniffing or
browser sniffing. Listing 2-1 shows a common UA sniffing script.
Listing 2-1.
JavaScript Code Used for UA Sniffing
// Get the user agent string
var browser = navigator.userAgent;
// Check to see whether Firefox is not in the string
if(browser.match(/Firefox/) === null){
// If it's not Firefox, send the user to another page
window.location.href = "sendstandardmessage.html";
} else {
// If it is, use the Mozilla SMS API to send an SMS
navigator.mozSms.send("01234567891", "My Message");
}
What could possibly be wrong with UA sniffing? While you will provide support
for Firefox and a fallback for other browsers, you will fail to support browsers
that might have the same APIs available as Firefox.
This particular API is also only available in Firefox 11+, so you will also need to
ensure that the version is included in the UA sniffing script.
As you begin to increase the granularity of your browser detection scripts, you
also decrease maintainability and increase complexity by having to constantly
update your sniffing code to account for new browsers and versions. Before you
know it, your JavaScript library becomes unmaintainable spaghetti code.
