Why won't my viewport tag properly use device width (no zoom) on most mobile devices?

Question

UPDATE 12/2020: Seeing as this post still gets activity, I must stress that there are no answers here that apply to modern web development. In fact, almost all of the answers here would put your website in a precarious situation when it comes to accommodating those with disabilities. The only thing your responsive website should include in the head tag is:

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

Much more than just UX is at risk if you attempt to lock users into a specific scale (such as lawsuits or even government fines).

-- CONTINUE AT YOUR OWN RISK --

UPDATE 03/2019: This Q&A still gets some activity, nearly 5 years my question came up. Please note this problem was due in part to more common irregularities in older mobile devices at THAT time. With today's browsers and devices, fiddling with viewport scalability would be a shoe-horn fix to a bigger problem which is likely a problem in either your CSS or possibly your markup.

I've built a dozen responsive sites and have never experienced this problem. Basically, I'm using the meta tag for viewport with width=device-width, but iPhone and Android devices are still zooming. For some reason, I don't have this problem on Windows phones.

Here is an excerpt from the head html:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Here is the HTML for the main wrappers (note the outermost div is added from jquery.mobile:

<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >   
    <div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
        <div class="container">
        </div>  
    </div>
</body>

And here is the main wrapper CSS:

html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}

body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}

Bootstrap is also being loaded prior to the stylesheet.

I have tried a number of different things already including:

Removing jquery.mobile
Removing bootstrap
Updating bootstrap to the latest version
Changing the viewport tag to the following:
width=device-width, initial-scale=1.0
width=device-width, initial-scale=1.0, user-scalable=no
width=device-width, initial-scale=1.0, user-scalable=0
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
Adjusting various CSS properties related to width/max-width

I am completely out of ideas and seem to have exhausted anything new I can find / try via google. I would greatly appreciate any help you can provide!

Lawrence Johnson · Accepted Answer · 2018-04-01T18:18:06.320

After much testing and continued searching, I came up with a fix that seems to be very effective. Another solution I saw to a similar problem proposed the following:

<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />

This, at first, seemed like a decent solution as it worked on most phones. It bugged me a little bit though because it obviously isn't geared specifically towards working with any device width. That answer can be found here:

Android viewport setting "user-scalable=no" breaks width / zoom level of viewport

This solution worked on most mobile devices, but on some it was ineffective causing the display to be using incorrect zoom.

I believe the reason why the solution above is not effective is because not all mobile devices use a base 320 for zoom. So when device-width isn't working, this causes the constraints to be inconsistent.

I tried a bunch of different things, but then ultimately tried the following which (so far) seems highly effective:

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

I believe the difference in this tag is that it tells the device to use it's native dimensions, but then adds a scale factor that tells it to not zoom in as much as it would normally.

I never was able to find any CSS adjustments that solved the problem, and I welcome any other answers in the future that may add further clarification to the problem/solution.

One other thing I'd like to add, is that an alternative meta tag that may be more effective for larger devices (tablets, which the site in this problem was not designed for), may be to set maximum scale instead of using user-scalable. Like this:

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

EDIT / Update 2018:

This question still gets quite a few hits even though it's a very dated problem. Certainly in hindsight and after much more experience with responsive, I can say that both the initial problem and the solutions were based around stop-gap issues that resulted from poorly constructed responsive CSS and HTML.

While the answers here may help future visitors solve for issues when it comes to retro-fitting more dated code, I would highly recommend that any new development conform to the latest in responsive standards. If your markup and CSS conforms, there are very few reasons why you would ever not want the standard meta for viewport in responsive (below):

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

The problem with this solution is that the user can't zoom anymore (`user-scalable=no;`). — Skippy le Grand Gourou, Aug 26 '14 at 09:11

score 4 · Answer 2 · answered Apr 01 '18 at 12:01

4

I just removed initial-scale=1 and suddenly Android on Chrome and Silk on a Kindle both worked perfectly, site width matched to screen width in both orientations.

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

I haven't tested on IOS, but I'll add an IOS specific hack if I need to.

answered Apr 01 '18 at 12:01

Geoff Kendall

1,307
12
13

This absolutely don't have worked for me (as the content is no more scaled for mobiles). – FredyWenger Oct 16 '19 at 09:24
This worked for me on my iPhone iOS 13.4.1. If with "initial-scale=1", it would show a zoom out page on iPhone. – whyisyoung Jun 20 '20 at 06:19

score 2 · Answer 3 · answered Mar 12 '19 at 04:20

2

I had an issue with bootstrap 4.3.1 looking like a scaled down version of a tablet view on mobile using this meta tag setup:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

so then i used the meta tag below to fix on mobile:


<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

now it looks like bootstrap 4 should look cross device

answered Mar 12 '19 at 04:20

Donald Campan

21
5

You might want to have a look at bootstrap 4's device width breakdown vs the device width you are testing on. I haven't experience this problem in 4.3.1. – Lawrence Johnson Mar 12 '19 at 17:36
1

I have the same problem after update from BS 3.x to 4.x. If I emulate a mobile device in Chrome, the width is not correct and I have to doubleclick to adjust the size correct, whereby it works correct with BS 3.x. I had the viewport in place (content="width=device-width; initial-scale=1.0;). If I add user-scalable=0; it works also with BS4.x, but the view then is no more scalable (what is not nice and not what I want). But your posting drives me in the right direction. – FredyWenger Oct 16 '19 at 08:30

Skippy le Grand Gourou · Answer 4 · 2020-08-31T07:23:27.323

0

Check this answer. In short :

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi;" />

edited Aug 31 '20 at 07:23

answered Aug 26 '14 at 09:15

Skippy le Grand Gourou

6,976
4
60
76

1

Are you sure the **;** instead of **,** ? – PYK Aug 30 '20 at 23:21
@PYK Indeed the comma would be the right syntax for `meta` tags and in particular for `viewport`’s `content`. I guess some browsers may ignore what follows the semicolon. – Skippy le Grand Gourou Aug 31 '20 at 07:23

score 0 · Answer 5 · answered Dec 02 '15 at 18:49

Great Stuff, however, I have discovered that if you are on a desktop and the viewport is set to a static width the backgrounds may not render on the portions of the screen not shown when you horizontal scroll.

To fix this for non-responsive pages simply add a min-width to the body.

body {
    min-width: 960px;
}

Note, this is in addition to setting the viewport a static width

<meta name=viewport content="width=960">

score 0 · Answer 6 · answered Nov 30 '18 at 21:38

Anyone looking for a fix in the future, stay with content="width=device-width, initial-scale=0.5" BUT adjust the initial-scale= until it works. I built a site that worked fine on different resolution monitors but was absolutely horrid on mobile. Try 0.5 then scale downwards .1 at a time until it works. On two Android phones 0.3 worked perfectly for me.

score 0 · Answer 7 · answered Mar 10 '20 at 11:45

Just incase some other people are having the same issue I am, my problem as of 3/2020 seemed to be how I was setting up my inputs in my @Media query.

For me the meta tag didn't really do anything.

<meta
        name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0"
    />

My problem was more

@media only screen and (max-width: 500px) {
   .input-example {
    font-size: .9rem;
   }
}

Once I changed it to :

@media only screen and (max-width: 500px) {
   .input-example {
    font-size: 1rem;
   }
}

Everything seemed to work fine. From what I read it needs to either be 1rem or 16px.

Why won't my viewport tag properly use device width (no zoom) on most mobile devices?

7 Answers7

Linked