Menu
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:
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!
969
The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
What does “The initial scale in the viewport meta tag is not working” mean? This means that the URL in question does not contain the initial scale in the HTML document. Or, this element is on the page, but you set it to a value other than 1.0.
A recommended approach is to use “resolution switching,” with which it is possible to instruct the browser to select and use an appropriate size image file depending on the screen size of a device. Switching the image according to the resolution is accomplished by using two attributes: srcset and sizes.
The size of the viewport can be defined using the width and height attributes of the <svg> element. In this example, the viewport has an aspect ratio of 3:4 and is, by default, 400 by 300 units, with a unit generally being a CSS pixel.
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
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
