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.
Key Takeaway
- Always add the viewport tag in the HEAD section of your site.
- This tag is supported by most popular mobile browsers and used by thousands of web sites.
- Don’t use the responsive design meta tag if your website isn’t specifically designed to be responsive.
SEO Influence Meter
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-Metatag | Value in this example | Description |
| width | width=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. |
| height | height=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-scalable | user-scalable=no | Indicates 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-scale | initial-scale=2.0 | Sets 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-scale | maximum-scale=2.5 | Sets 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-scale | minimum-scale=0.5 | Limits 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.
DIY MetaTags
It's not that difficult to create meta-tags. We've made it simple for you by offering you this free meta-tags wizard.
Boost My Metatags
You've created the perfect meta-tags. Now it's time to let the world know your website is open for business.
Create My MetaTags
Rely on the experts. We create the perfect meta-tags for you. Build around the perfect keywords attracting the right customers.
Need some professional
SEO help?
Contact our Customer Service representative to make an appointment and to answer all your questions!
SEO & Online Marketing blog
7 SEO tips for Ecommerce Brands
Hiring a Webflow Agency for your Company Website
