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

Budget-Friendly SEO Tips for Independent Graphic Designers

Budget-Friendly SEO Tips for Independent Graphic Designers

https://pixabay.com/vectors/seo-online-analysis-1327870/ If you are an independent graphic designer looking to draw more eyeballs to your dynamic creations online without stretching…
Services to Expect From an SEO Partner

Services to Expect From an SEO Partner

It’s high time for business leaders to accept that they can no longer manage their own company’s SEO in house.…
Mastering Digital Marketing: 5 Steps Students Need to Take

Mastering Digital Marketing: 5 Steps Students Need to Take

https://unsplash.com/photos/gxD8hCmi0IQ In the era of digitalization, a strong understanding and mastery of digital marketing is becoming a vital skill set,…