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.

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.

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.

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.

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:

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

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..)

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.

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.. :/

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.

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.

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

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.

To further explain, I have, body at maxwidth 31em, and an initial font-size of 19px. A media query or two to fiddle with font-size a bit (e.g., a bit larger for iPad). I have read, and firmly agree with, Matthew Butterick’s Practical Typography. (Set in 24px, a bit large for my taste.) For readability, he suggests, don’t be afraid of “white space”. Hence the laptop version of my site has plenty, but has comfortable-to-read line lengths. As is true on other devices. A worth goal, I think: readability.

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.