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:

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.

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. 
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

The importance of search intent in keyword research

The importance of search intent in keyword research

Keyword research is one of the fundamental building blocks of search engine optimization; that much is clear even to someone…
Plagiarism in Writing: Awareness & Prevention Tips

Plagiarism in Writing: Awareness & Prevention Tips

Plagiarism is an act of stealing someone’s content or ideas and publishing them as their own. It is represented as…
Consumer Insights That AI Has Contributed to the World of Digital Marketing

Consumer Insights That AI Has Contributed to the World of Digital Marketing

For far too long, people have had this somewhat unrealistic fear of technology. At one point, people feared the “Rise…