Mobile Web Viewport META Tag

Past few days i was tying to develop a mobile FB app for Android and Iphone.The hardest part in this application i feel is The UI . I spend almost 3 days to get the UI work proper. First i Used jQuery mobile Frame work; the frame work is cool but the documentation is very poor. $.mobile.ajaxEnabled function is never going to work.finaly i edit the source code and changed the ajaxEnabled=true to false :) . The next issue was the page size it render in different size in different browsers. an that was the hard part for me i don't see any solutions in jquery mobile site. after gogling an hour i fond a solution in mozilla web site . This will make jquery mobile full page and proper size.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

this meta tage is great and it solved my UI issue some usefull mobile meta tags bellow .

META directive	Example Value	Description
width	width=320 width=device-width	Logical width of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device.
height	height=480 height=device-height	Logical height of the viewport, in pixels. The special device-height value indicates that the viewport height should be the screen height of the device.
user-scalable	user-scalable=no	Specifies whether the user can zoom in and out of the viewport Possible values are yes or no.
initial-scale	initial-scale=2.0	Sets the initial scaling or zoom factor used for viewing a Web page.
maximum-scale	maximum-scale=2.5	Sets the user’s maximum limit for scaling or zooming a Web page.
minimum-scale	minimum-scale=0.5	Sets the user’s minimum limit for scaling or zooming a Web page.

References

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

https://developer.mozilla.org/en/mobile/viewport_meta_tag