Using Viewport Tag for Non-responsive Design

November 25th, 2013 Written by

Launching a website is an arduous task alone; the amount of company bandwidth is only as strong as its numbers. Therefore, it is understandable for smaller companies to find themselves putting off those luxurious tasks such as optimizing their website for tablets and mobile devices. However, did you know that the viewport meta tag can be a very useful asset to non-responsive websites?

The function of the viewport tag is primarily used for responsive sites to define the width and height of the device viewing it.

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

The default view-port for the iPhone, for instance, is 980px. If your web design is fits within this, you need not worry about the viewport tag. However, as web design continues to grow, so have the widths of many sites. If your site does exceed 980px, you must specify the exact width. You can easily do this by properly using the viewport tag. Below is an example.

viewport-post

The screen shot on the left illustrates what happens when incorrectly implemented. As you can see, the page has zero margin surrounding it, causing the content to touch either side. On the right, this has been remedied with the viewport tag by specifying the viewport width to 1024px.

<meta name="viewport" content="width=1024">

Just as you may have guessed, this also applies to sites with too narrow a width. If your design calls for a width of 800px, you would want to add the viewport tag as follows:

<meta name="viewport" content="width=800">