Adding the Viewpoint Meta Tag to the Responsive Template

Now that you have your stylesheets linked in your code for the Responsive Template, you will need to add the “Viewport Meta Tag” to your head section of your code.

What is the viewport Meta tag?

The viewport Meta tag alters the behavior of a mobile browser by modifying the “virtual viewport” of the device. The virtual viewport is the view of a mobile device screen that is other than the default view; therefore being deemed “virtual“. This allows the screen on devices to have specified zoom behaviors. Below is the code snippet we will use in our Responsive Template.

This Meta tag tells the mobile device to not zoom. This allows the Responsive Template for mobile devices to be loaded in the scripts. Below is a table of different properties that can be used for the viewpoint Meta Tag.

Meta tag “content” property attributes for “viewport“

Below is a table with an explanation of the Meta tag Viewpoint properties.

initial-scale
The initial zoom when visiting the page. 1.0 does not zoom.

minimum-scale
The minimum amount the visitor can zoom on the page. 1.0 does not zoom.

maximum-scale
The maximum amount the visitor can zoom on the page. 1.0 does not zoom.

user-scalable
Allows the device to zoom in and out. Values are yes or no.

Add the Meta tag to the head section

Add the following Meta tag into your head section of your website. You will want to place the Meta tag below the other Meta tags in your head section or above your title tag.

<meta content="width=device-width" name="viewport">

That’s all for the Responsive template. You should see your site appear normal in all types of devices.