I’m sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven’t got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.
General Use of Viewport Tag
Viewport meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. Below is a sample viewport tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Using Viewport Tag for Non-responsive Design
As you may know, the default viewport width on iPhone is 980px. But your design might not fit in that range. It could be wider or narrower. Below are two examples where you can utilize the viewport tag to improve the rendering of non-responsive design on mobile devices.
Example
Take a look at the Themify site on your iPhone.
The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.
<meta name="viewport" content="width=1024">
Another Example
If your design is too narrow, it might also cause an issue. Lets say the container width of your design is 700px and it is not responsive, it would look like the screenshot on the left where there is a big empty space on the right.
You can simply fix this by setting the viewport width to 720px. The width of your design doesn’t change, but iPhone will scale it to fit in 720px.
<meta name="viewport" content="width=720">
Common Mistake
A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Nov 23, 2012 @ 3:12 pm
Nicely written. I now understand the importance of the viewpoint tag and will use it properly in the future. Thanks again.
Nov 26, 2012 @ 12:28 am
I guess you learn something new everyday. I was not familiar with this meta tag. Not sure if this will come in handy anytime soon. Most website I work with are designed using media queries, for responsive design?
Nov 26, 2012 @ 2:19 am
This is very useful for our web designers. thanks for sharing….
Nov 26, 2012 @ 5:12 am
Thank you to everyone who contributed to the
Dec 4, 2012 @ 6:47 am
Wow, great post. I was just searching for something like this on google and found it
Jan 29, 2013 @ 3:28 pm
Thanks for the tip. It is a great help for some issues with a current client. Problem solved. I think I will share this with my web design friends on Facebook.
Jan 30, 2013 @ 6:53 am
Well, 100% make sense! I make “common” mistake – some parts of site was responsible, while others – not yet (i.e. in the progress)… so set content=”width=1024″ saves me :)
Thanks!
May 24, 2013 @ 4:50 am
Liquid-crystal-display televisions (LCD TV) are television sets that use LCD display technology to produce images. LCD televisions are thinner and lighter than cathode ray tube (CRTs) of similar display size, and are available in much larger sizes. When manufacturing costs fell, this combination of features made LCDs practical for television receivers..**:
http://caramoan.coTake a look at all of the most recent content on our personal web portal
May 26, 2013 @ 2:15 am
As we know that meta tag is one of the vital part in any web designing and this post deeply define its all aspects.
May 26, 2013 @ 7:51 am
Hello !
This is an impressive detailed post about meta tag. Meta tag is too much important for the best designing, indeed. I totally agree with the common mistake, which usually people use to do.
so thanks for sharing this post.
Market of cleaning supplies
Jun 12, 2013 @ 6:38 am
Meta tag is one of the vital part in any web designing. I fully agree, the common mistake, which mostly people use to do.
Dec 14, 2016 @ 6:48 am
It’s really helpful. Nicely written. Thank you for sharing.