On July 15, 2011 In User interface with , , , tags

Fitting mobile template inside mobile screen using viewport meta tag

When people started using our free mobile website template, they also started asking me questions about how we make our template to fit inside a mobile screen. Is there any kind of a book you have been reading or something else, then I said “ There is no secret ingreident” a famous kung fu panda dialogue.

Viewport meta tag controls your template to fit in your mobile

But there is a code which can help us fit the template into almost any mobile, its just one line of code and works on everything like ios, android and all high end mobile devices. That is “Viewport Meta Tag” which resizes your web template to fit in the mobile screen. It works so well that Mobile Firefox (Fennec) improved support for the viewport meta tag.

Now lets talk about this silly little code over here:

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

Viewport is the name of the meta tag.

Width define’s the browser to which size it should resize the template.it was set to ‘device-width’ so that it automatically detect the mobile screen width.

Initial-scale means intial zoom when the page is loaded.

Maximum-scale means the maximum level upto which you can zoom. In this case,we have set both the values to 1.so, no zoom in and no zoom out but you can play along with the numbers.

If you think this info is in’t enough then visit using viewport meta tag to control layout on mobile browsers at Mozilla Developer Network