Menu
I have a largely responsive site, built on Bootstrap 2.3. But one page I need to be zoomed out to fit items that don't work responsively. If I double tap, it zooms out perfectly. But I want to default this way.
html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container-fluid" style="min-width:1024px">
<div class="row-fluid">
<div class="span12">
<!-- arbitrary content. point is: zoom out by default, don't crop img -->
<img src="1024x768.png">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<!--
if min-width is observed, these should be side by side
instead of wrapped like responsive normally does
-->
<img src="300x768.png"><img src="300x768.png"><img src="300x768.png">
</div>
</div>
</div>
</body>
Note: I'm not trying to disable zoom. I just want to default zoomed out.
I've tried the following without success:
1. <meta name="viewport" content="width=1024">
2. <meta name="viewport" content="user-scalable=yes">
3. body { float:left; min-width:1024px; }
4. min-width on all wrapped objects
UPDATE
Ugh. I was using Google Chrome mobile emulation to debug. Actual mobile device worked fine with html,body {min-width:1024px;}. I threw in as well to de-responsify some of the content.
Pro-tip: Don't rely on Google Chrome mobile emulation.
401
Use the meta tag to do so
<meta name="viewport" content="width=device-width, initial-scale=1">
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.
Source
122
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
