HTML and CSS Reference
In-Depth Information
Figure 4-1. LinkedIn Mobile Web
Device and Feature Detection
The first step in delivering new HTML5-based features to your user base is actually
detecting what the browser supports. You need to communicate with the browser to see
what it supports before the page is even rendered. In the past, you were forced to detect
and parse the—sometimes unreliable—browser
userAgent
(
UA
) string and then assume
you had the correct device. Today, such frameworks as
Modernizr.js
or just simple Java‐
Script, help you detect client-side capabilities at a much more finely grained level.
Which detection method is best? The feature-detection approach is new, but growing,
while the approach of parsing the
userAgent
string is flawed and should be handled
with caution. Even at the time of this writing, browser vendors are still getting it wrong.
The
userAgent
string for the latest phone-based Firefox on Android, for example, re‐
ports itself as a tablet not a phone. Mozilla uses the exact same
userAgent
string for
both phones and tablets, and that string has the word “Android” in both. The key to
success is understanding how you can use each approach most effectively, either by itself
or to complement the other.
