{"id":2087,"date":"2016-11-13T14:09:11","date_gmt":"2016-11-13T14:09:11","guid":{"rendered":"http:\/\/cssreset.com\/?p=2087"},"modified":"2016-11-13T14:09:11","modified_gmt":"2016-11-13T14:09:11","slug":"css-and-metadata-the-html-viewport-tag","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-and-metadata-the-html-viewport-tag\/","title":{"rendered":"CSS and Metadata: The HTML Viewport Tag"},"content":{"rendered":"

 <\/p>\n

Creating a responsive and mobile friendly site happens mostly in the CSS stylesheets with media queries and responsive rules, however there is one absolutely vital line of HTML that must be included in your site’s header file if you want your pages to be responsive, and that’s the meta viewport tag.<\/p>\n

The viewport is the area of a page that’s visible to the viewer. As you probably know, the viewport on a laptop or a desktop monitor is significantly larger than that of a mobile phone or tablet, which is the whole reason that responsive design is necessary at all. The goal of responsive and mobile friendly designs is to make sure that a page looks just as good on a mobile device as it does on a desktop. So to create a truly responsive design, we need to be able to control the viewport. That’s where the meta viewport tag comes in:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. &lt;<\/span>meta\u00a0name="viewport"\u00a0content="width=device-width, initial-scale=1.0"&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    That one simple line above will make it so that the width of your user’s device = the width of your page. The one line of HTML combined with your media queries will allow for your pages to become completely mobile friendly and responsive.<\/p>\n

    To see the viewport meta tag in action, take a look at the two images below. The first is a screenshot of what CSS Reset looks like on a mobile device without the viewport tag, and the second is screenshot of how it looks with the viewport tag. The difference is pretty clear…so make sure you don’t forget to add the viewport tag when you’re creating your next responsive page.<\/p>\n

    \"Screen<\/p>\n

    \"Screen<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

     <\/p>\n

    Creating a responsive and mobile friendly site happens mostly in the CSS stylesheets with media queries and responsive rules, however there is one absolutely vital line of HTML that must be included in your site’s header file if you want […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2087"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2087"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2087\/revisions"}],"predecessor-version":[{"id":2091,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2087\/revisions\/2091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2089"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}