Meta tags for mobile site and more concepts and references for mobile application

These three meta tags tell the mobile browser to display the webpage as in mobile screen size, not desktop.
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width=device-width" />
  For Windows Phone, iPhone, Android, Opera, they have different default width values. Windows Phone 7: 1024 pixels, iPhone: 980, Android and Mobile Opera: 800 px (note 100px=2.646cm)
for "Zoom out" size instead of its real size. Using "width=device-width"  to force display in actual device width. For example:iphone resolution: 640 x 960 px, actual device-width and height: 320 x 480.
reference:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
User agent switcher  0.7.3 add-on for Firefox. I only see iphone 3.0. We can add android and iphone 5 by click edit button. User agent strings can be found
http://www.useragentstring.com/pages/useragentstring.php
 webkit used by Apple's Safari web browser and Google's Chrome web browser versions up to 27,
  Trident engine used by Internet Explorer, and the Gecko engine used by Firefox.

CSS media queries:
In CSS:
@media screen and (max-width:800px) {

}
@media screen and (min-width: 801px) {

}
modernizr is a JavaScript library to detect  CSS3 and HTML5 features in user browser.
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