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|| ||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|| ||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|| ||Specifies whether the user can zoom in and out of the viewport Possible values are |
|initial-scale|| ||Sets the initial scaling or zoom factor used for viewing a Web page.|
|maximum-scale|| ||Sets the user’s maximum limit for scaling or zooming a Web page.|
|minimum-scale|| ||Sets the user’s minimum limit for scaling or zooming a Web page.|