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.
Thanks works great on my IPad but not on my Ipone
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.
Anyone noticed, that user-scalable=no is ignored in mobile Safari (maybe since iOS 10 update)? Or is it just my device (iPhone 5)?
it’s spelled “iPad” and “iPhone”.
Sentences begin with a capital letter.
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.
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.
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){
}
You have to write the media query for each screen.
Hi add this to remove whitespaces
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.
**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 ?
**
hi i am Pramod Kushwah dynamic website only index and static all pages
Yes you will have to insert them on all pages.
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
ipad identify as “desktop” clients. so you have to declare your styles for it as you would in a @media block
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
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
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?
Hi,
Nice article.
Here are few links to know much about viewport.
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
http://www.quirksmode.org/mobile/metaviewport/
Try to put the width as “100%” , and then the layout will adjust in any screen
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
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
thanks, this is really helpful..
i was wonder how to make my website automatically zoomed in when user open via smartphone.
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; }
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-whitepapers2] 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)
read more..
Kudos!
Only note that ‘user-scalable’ possible values are ‘yes’ or ‘no’
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
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.. :/
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.
There are no
device-width
anddevice-height
properties in responsive meta tag – they are values. Look at spec.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.
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.
Can I use media queries without the meta viewport?
document.ready() {
alert(‘thanks!’);
}
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;
}
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
hi, can we add user-scalable=no, minimum-scale=1.0 and maximum-scale=1.0
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
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?
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.
Thanks for the important information, actually i have added the code to non-responsive design and it working great.
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.
here is syntax used meta tag name=”viewport” content=”width=device-width”
I’ve had great results specifying “yep” for device-width and user-scalable. Adding “1” for initial-scale didn’t seem to make a hill of beans’ difference.
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.
“user-scalable=no” stopped my fixed-position top nav shifting up and down when scrolling in Chrome on Android. Thanks for the reference!
Can I use this for non mobile browser. I want to scale my entire website up by a factor 1.2. When I try using CSS ‘transform:scale(1.2)’, everything looks great, but there are issues with the positioning of modals & ‘after page load’ DOM added elements. So, I cannot use ‘transform’. The CSS ‘zoom’ property does not work in Firefox. I wondered whether I could use meta name=viewport with initial-scale of 1.2, to resolve this issue. Thanks.
W3C CSS Validator results (CSS level 3 + SVG)
Sorry! We found the following errors (1)
wp-content/themes/twentysixteen/style.css?ver=03779222086b3b8a23b60f8f148f2124
2750 Value Error : width device-width is not a width value : device-width
My problem with the methods shown here is that none really address the problem of simultaneously setting the viewport width to “device width”, AND making the landscape and portrait text display in identical sizes. The way I’ve been getting around this is to first specify an overall body font size of 1rem for all desktop browsers, Then in the media selectors, specify different font sizes for the portrait and landscape cases. For example, if I settle on 0.9rem for portrait body element, then 0.7rem font sizes in landscape, I’ll end up with pretty close font equivalence when the mobile screen is turned. Maybe there’s a way of getting the same effect without such compensations, but this is the only one I seem to be able to count on.
user scalable is 0 here instead of No, would there be any contradictions? e.g (user-scalable=0;)
There’s one more useful feature in the viewport meta.
If it is not specified, the browser uses the default, 160dpi as of today. But the actual devices today usually have much larger number of dots per inch. That’s why the Android team has implemented a custom meta viewport property to allow you to customize browser scaling for high resolution (HDPI) screens.
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
This will use target device’s DPI instead of default 160dpi value.
width=device-width; height=device-height;
Thanks works great