Responsive Design Meta Tag

Responsive Design Meta Tag

< Meta Name = "Viewport"

The Viewport meta tag for Responsive Web Design is the area of a web page in which the content is visible to the user. It varies with the variation in screen size of the devices on which the website is visible.

When a web page is not made responsive for smaller viewports it looks bad on a smaller screen.  By using the viewport meta tag you can control the layout for web pages on mobile browsers.

Unknown Meta Tag - The Responsive Design Tag

Key Takeaway

  1. Always add the viewport tag in the HEAD section of your site.
  2. This tag is supported by most popular mobile browsers and used by thousands of web sites.
  3. Don’t use the responsive design meta tag if your website isn’t specifically designed to be responsive.

SEO Influence Meter

0%

The tag has 
some SEO influence!

Meta Name Viewport

The Meta tag is the Responsive Design Meta tag, which we call “Viewport Meta Element”. By using the viewport meta tag we can control layout for web pages on mobile browsers.

The  Viewport metatag could look like this:

<meta name="viewport" content="width=240,user-scalable=no" />

This is a simplified version of the Viewport tag that sets the browser viewport width to a maximum of 240 pixels, ensuring that the user cannot scale the content.

<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

The content values of the Viewport META tag are separated by commas and contain a list of guidelines and their values.

Viewport-MetatagValue in this example
Description
widthwidth=320
width=device-width
Logical width of the viewport, in pixels. The special device-width value indicates that the viewport width should be the screen width of the device.
heightheight=480
height=device-height
Logical height of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device.
user-scalableuser-scalable=noIndicates whether the user can zoom in and out of the viewport, scaling the display of a web page. Possible values are yes of no.
initial-scaleinitial-scale=2.0Sets the first scaling or zoom out factor (or multiplier) and can be used to view a web page. A value of 1.0 shows an unscaled web document. A value of 1.0 shows an unscaled web document.
maximum-scalemaximum-scale=2.5Sets a maximum limit for the user to scale and zoom a webpage. Values are numeric and can range from 0.25 to 10.0.
minimum-scaleminimum-scale=0.5Limits the user to a minimum for enlarging or zooming in on a webpage. Values are numeric and can be from 0.25 to 10.0.

 

HTML Code Viewport Example

Affordable & Effective

We offer affordable SEO services that are fast and effective.

Need some professional
SEO help?

Contact our Customer Service representative to make an appointment and to answer all your questions!

SEO & Online Marketing blog

Google Rethinking Payday Loans & Doorway Pages?

Google Rethinking Payday Loans & Doorway Pages?

Best yet, not only does Google maintain their investment in payday loans via LendUp, but there is also a bubble…
How Google Search Works in 2017

How Google Search Works in 2017

Many years ago we created an infographic about how search works, from the perspective of a content creator, starting with…
Benefits of Using Modern Promotion Technologies

Benefits of Using Modern Promotion Technologies

Technology is constantly changing, and it is obvious it takes our life to a whole new level. As the Internet…