Grow your CSS skills. Land your dream job.

Last updated on:

Responsive Meta Tag

I tend to use this:

<meta name="viewport" content="width=device-width">

Although I see this is recommended a lot:

<meta name="viewport" content="width=device-width, initial-scale=1">

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Note: don't use a responsive meta tag if your website isn't specifically designed to be responsive and work well at that size, as it will make the experience worse.

There are more attributes this tag supports:

Property Description
width The width of the virtual viewport of the device.
device-width The physical width of the device's screen.
height The height of the "virtual viewport" of the device.
device-height The physical height of the device's screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

It's generally recommended that you don't prevent scaling, as that's annoying and potentially an accessibility problem.

You'll probably want this in your CSS as well:

@-ms-viewport{
  width: device-width;
}

Good to know: changing the value of this meta tag with JavaScript does work, the page will react to the new value. Either out the entire tag and replace, or change the content property. Not a super common need, but it can come up.

Comments

  1. Alison
    Permalink to comment#

    Thanks works great on my IPad but not on my Ipone

    • Permalink to comment#

      Seems like it does not work perfectly for everyone. I tried it and it works fine with the phones but problems are there on samsung tablet.

  2. spellright
    Permalink to comment#

    it’s spelled “iPad” and “iPhone”.

  3. Even google has taken responsive sites as default and will rank those sides higher and better. So every measure has to be taken so that your site is viewed better in all devices.

  4. Monica
    Permalink to comment#

    meta name viewport doesn’t work correctly

    i tried all these meta tags on my website but no one of them worked
    meta name=”viewport” width=”device-width”
    meta name=”viewport” content=”width=device-width, initial-scale=1.0″
    meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″
    meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”

    but when i added @-ms-viewport{ width: device-width; } to style.css it worked but the width is not 100% on my iphone and samsung tab, users still need to scroll horizentally.
    My main content width is 1070px.

  5. Arunkarthick
    Permalink to comment#

    Tried with tag

  6. robert
    Permalink to comment#
    @Monica
    

    It’s because, depending on the device, scale=1 is not scale=1 but scale=1.5…

    So yeah, here’s html5 awesomeness.
    Me too, I wonder how many geniuses are required to end up with such a stupid result.
    You specify scale 1, you get 1.5

    It has to do with dpi/definition of the device, basically 1 pixel is not equal to 1 pixel.

    Good luck with that.

  7. Sanjeev
    Permalink to comment#

    **Hey I am confused and I want one help from you.
    I need to insert viewport metatag into only index page or all the pages.
    Please reply, Eagerly waiting for your response ?
    **

  8. Laura
    Permalink to comment#

    My website is not scaling down for ipad mini, is there a way I can change the scale so that the mini sees the mobile version of my website?

    Contains this in the header:
    <meta name=”viewport” content=”width=device-width,initial-scale=1″>

    And this in the css:
    #featured-content .flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    }
    #featured-content .loading .flex-viewport { max-height: 300px; }

    Thank you for your help!!

    L

  9. Permalink to comment#

    There is a bug with viewport units on iOS7 and lower. To fix it just you this js:

    https://github.com/rodneyrehm/viewport-units-buggyfill

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".