Thursday, December 5, 2013

modernizr JavaScript library: detect mobile, CSS3 and HTML5 features in user browser.



We can use  server-side useragent to detect browser type:

Example code to show browser type using  useragent
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.write(navigator.userAgent);
}
</script>

The userAgent property returns the value of the user-agent header sent by the browser to the server.

But a lot of time, we need to detect the specific features of   mobile, CSS3 and HTML5 rather than browser type. modernizr  JavaScript library is a client-side script to detect  mobile, CSS3 and HTML5 features in user browser.  modernizr  JS library can be downloaded from:
http://modernizr.com/
To use   modernizr JavaScript librar:
<script src="modernizr-1.7.js" type="text/javascript"></script>
test for geolocation  feauter
Modernizr.geolocation  will return true or false.
test for touch feauture
Modernizr.touch
Test for HTML5 feature
Modernizr.svg
Modernizr.canvas
local storage
Modernizr.localstorage
and more 

HTML5 boilerplate:
http://html5boilerplate.com/mobile/ 

No comments:

Post a Comment