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. User Avatar
    Alison
    Permalink to comment#

    Thanks works great on my IPad but not on my Ipone

    • User Avatar
      Pali Madra
      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.

    • User Avatar
      Felix
      Permalink to comment#

      Anyone noticed, that user-scalable=no is ignored in mobile Safari (maybe since iOS 10 update)? Or is it just my device (iPhone 5)?

  2. User Avatar
    spellright
    Permalink to comment#

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

  3. User Avatar
    Lakeside Techies
    Permalink to comment#

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

    • User Avatar
      blaqstar
      Permalink to comment#

      you will have to add some codes in the style sheet for the different screen sizes there are. so that the page will adjust itself if the user is on a tablet or a phone i.e. “viewport”
      this is what i do.

      @media screen and (max-width: 768px){
      and then styles go in here}

      where “768px” is the the screen size. i’ll do the same thing for a mobile screen size that will be about 320px.

      @media screen and (max-width: 320px){
      }

    • User Avatar
      Aditya
      Permalink to comment#

      You have to write the media query for each screen.

  5. User Avatar
    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.

  6. User Avatar
    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 ?
    **

    • User Avatar
      Pramod Kushwah
      Permalink to comment#

      hi i am Pramod Kushwah dynamic website only index and static all pages

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

  8. User Avatar
    Maks
    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

  9. User Avatar
    it a trimendious site for asker
    Permalink to comment#

    I want to view my web page zoom in and out in all mobile and when open in internet it minimize look scrol look how can i do

  10. User Avatar
    DAAN
    Permalink to comment#

    I have a question.

    Im creating a simple jquerry fitnesswebsite, and I am trying to create a startscreen with the picture of the human body. On that picture I’ve placed some shapes with links so when you click on the arms you go to a the page where you can find ways to train your arms and so on.

    But the problem is, when the device changes, the picture has to change with it. Which is no problem. But the coordinates have to change with it. Onfortunately that wont work for my.
    I’ve tried to create a formula to with the variable device-width in it:

    coords=”device-width/19520,device-width/195118,device-width/19595,device-width/195246″

    195 is the Original width of the device and 20 ,118,95 and 246 are the coordinates on the Original picture. But it wont work for me. Is there a way to make this posible?

  11. User Avatar
    Gabriel
    Permalink to comment#

    Try to put the width as “100%” , and then the layout will adjust in any screen

  12. User Avatar
    Saitove
    Permalink to comment#

    I got some issues with iPad and the thing i did to fix it was adding content=”width=number .. sometimes it could be a better choise adding various width number rather “device-width” for web site fitting in the screen. Check it if you want its my first site ever :D http://saitove.bg

  13. User Avatar
    Juan
    Permalink to comment#

    Quick question! What will be the difference between
    name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=0″
    and
    name=”viewport” content=”width=device-width, initial-scale=1.0″

    thanks

  14. User Avatar
    satriyoz
    Permalink to comment#

    thanks, this is really helpful..
    i was wonder how to make my website automatically zoomed in when user open via smartphone.

  15. User Avatar
    Viggo Danielsen
    Permalink to comment#

    Maybe these two is the solution (put both in CSS somewhere at the top):

    @viewport{ zoom: 1.0; width: extend-to-zoom; }
    @-ms-viewport{ width: extend-to-zoom; zoom: 1.0; }

  16. User Avatar
    Elad Karako
    Permalink to comment#

    1]   you either should specify @viewport or use meta-tag <meta name="viewport" ...,

    you should not use both, the meta-tag is translated by the rendering engine to the @viewport rule, overriding whatever you’ll be writing in there…

    >> viewport on   dev.w3.org-whitepapers

    2]   the viewport meta-tag can be omitted completely, and be replaced with sending the data in the page’s headers instead,
    this can can help you save quite a lot of precious page space, making your pages smaller (and more readable..)
    actually you can do it for all the meta-tag in your page (including the newer ones of apple-tags and og:* ones..)

    here is a working example (PHP)

    <?php 
    header('Charset: UTF-8', true);
    header('Content-Encoding: UTF-8', true);
    header('Content-Type: text/html; charset=UTF-8', true);
    
    header('apple-mobile-web-app-capable: yes', true); //mobile friendly hacks
    header('apple-mobile-web-app-status-bar-style: translucent black', true); //run in full-screen mode
    header('viewport: width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, user-scalable=0', true);
    ?><!DOCTYPE html><html>.......
    .......
    

    read more..

    • User Avatar
      Ale Gadpen

      Kudos!
      Only note that ‘user-scalable’ possible values are ‘yes’ or ‘no’

    • User Avatar
      Michael
      Permalink to comment#

      can anyone help
      my website was created using the old Frontpage 2002
      trying to make it mobile friendly
      http://www.besthometheaterpro.com

      Thanks in advance

    • User Avatar
      Jan
      Permalink to comment#

      One could argue that putting these data in the header isn’t going to save you much since the headers has to be sent over the wire after all. Putting them in the html seems easier to maintain than having to code the headers in php or whatever serverlanguage you use.

  17. User Avatar
    Gerhard
    Permalink to comment#

    Is there an alternative to “device-width”? The reason I’m asking is because I want this bootstrap site to respond to the container size and not the window. The page is split in 2 and when I re-size the splitter I want the “columns” to respond and currently it will only respond when I re-size the actual browser window.. :/

  18. User Avatar
    Etern
    Permalink to comment#

    Guys i just new to website coding, i facing some problem during beginning of coding, if you guys can help me out for this , i much appreciate:)

    body{
    margin:0;
    padding:0;
    }

    #header{
    max-width:100%;
    height:135px;
    background-color:#ebebeb;
    }

    #headWrapper{
    max-width:1200px;
    height:85px;
    margin:auto;
    float:left;
    }

    .logo{
    background-image:url(“img/logo.png”);
    float:left;
    width:350px;
    height:78px;
    margin-top:20px;
    }

    #naviWrapper{
    float:left;
    max-width:530px;
    height:40px;
    margin-left:275px;
    font-family: ‘Open Sans’, sans-serif;
    margin-top:50px;
    }

    .homeBTN,
    .aboutBTN,
    .productBTN,
    .solutionBTN,
    .contactBTN{
    float:left;
    margin:5 20;
    }

    Home
    About us
    Products
    Solutions
    Contact us

    This is my coding, my problem stuck on the “header div” & “headWrapper div” part, when i wan to put margin-top on “headWrapper div”, both div of “header” & “headWrapper” will goes down together, i wish to just only the inner part div have margin-top.

  19. User Avatar
    Alex
    Permalink to comment#

    There are no device-width and device-height properties in responsive meta tag – they are values. Look at spec.

    • User Avatar
      Alejandro

      Hi. it was the width of an element set in px. I set it in % and it worked fine. I still don’t get it. I tried even removing the whole css and the wrong thing was still there, Maybe it was the chrome user agent.

  20. User Avatar
    Alejandro

    Hello. I have a really weird bug. I’m using this
    on two websites.

    I even validated the html and its ok on both. On the first website it’s working perfect but on the second website this happens:
    https://dl.dropboxusercontent.com/u/3570799/Screen%20Shot%202015-05-08%20at%201.56.49%20AM.png
    It seems to scale all the website to 50% width and align it to the left.

    I removed the css and it still happens, so I supposed it was something wrong with the html but it doesn’t have a single error according to he w3 validator.

    If I remove the meta tag, the fonts look too small. I’ll remove it and try to make it work using media queries but I don’t understand.

  21. User Avatar
    UNique
    Permalink to comment#

    document.ready() {
    alert(‘thanks!’);
    }

  22. User Avatar
    Joseph Buapim
    Permalink to comment#

    This is my code but it is not working can anybody help #sample{
    font-size:16px;
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-weight:400;
    color:blue;
    }

    @media screen only and(max-width:640px){
    #sample{
    color:#F00;

        }
    

    }

  23. User Avatar
    Ayush Agarwal
    Permalink to comment#

    how do i set the initial scale to the minimum scale supported by my device..like my iphone had a minimum scale of 0.3 but the minimum scale of ipad is 0.8…so i wanted the webpage to take the initial scale of the device automatically..is there a tag for that..? pls reply

  24. User Avatar
    robel
    Permalink to comment#

    hi, can we add user-scalable=no, minimum-scale=1.0 and maximum-scale=1.0

  25. User Avatar
    Menna Ramadan
    Permalink to comment#

    Hi, I want to use meta tag in index.html to disable zooming so it will apply to all html pages but in a specific page i want to override it to enable zooming
    can any body help me?
    Thanks

    • User Avatar
      codememobile
      Permalink to comment#

      Hi Menna, I don’t understand what you mean. At first your saying you want to disable zooming in all page, but then you say just a specific page. Which do you need to do it for?

  26. User Avatar
    PBScott
    Permalink to comment#

    My website works perfectly until I add a viewport, then ti won’t work properly on phones and tablets. The solution of course would be to not use viewport, but then Google won’t send visitors…. I hate this crap, my website is fine, the google robot is retarded, and IT needs ITS code changed.

  27. User Avatar
    Al3abMizo Games
    Permalink to comment#

    Thanks for the important information, actually i have added the code to non-responsive design and it working great.

  28. User Avatar
    Kiran
    Permalink to comment#

    My container size is 800px which need to be static. I require container should adjust in mobile according to width in portrait mode and adjust according to height in landscape mode.

    I used “” which working base on width in portrait mode. but landscape need to fix on height. please suggest.

    Also above syntax not working in Iphone. so any solution for Iphone.

    • User Avatar
      kiran
      Permalink to comment#

      here is syntax used meta tag name=”viewport” content=”width=device-width”

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag