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

0 comments:


PHP developer Cochin |PHP developer Kerala | PHP developer India | Flash developer/programmer Cochin | Flash developer/programmer Kerala | Flash developer/programmer India | web programmer kerala |web programmer Cochin |web programmer India |web developer kerala |Web developer Cochin | Kerala PHP | PHP freelancer| flash actionscript freelancer