如何在移动设备上强制缩小或最小宽度？答案

【问题标题】：How can I force zoom-out or min-width on mobile?如何在移动设备上强制缩小或最小宽度？
【发布时间】：2014-11-07 09:29:39
【问题描述】：

我有一个基于 Bootstrap 2.3 构建的响应性很强的网站。但是我需要缩小一页以适应无法响应的项目。如果我双击，它会完美缩小。但我想默认这种方式。

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>

注意：我并不是要禁用缩放。我只想默认缩小。

我尝试了以下方法但没有成功：

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

更新

呃。我正在使用 Google Chrome 移动仿真进行调试。实际的移动设备可以正常使用 html,body {min-width:1024px;}。我也投入其中以取消对某些内容的响应。

专业提示：不要依赖 Google Chrome 移动仿真。

【问题讨论】：

实际上，我的草图并不完全准确。当我通过双击缩小时，导航会按比例缩小而不是保持全宽。所需的结果如图所示，但到目前为止我无法做到这一点。
呃。我正在使用 Google Chrome 移动仿真进行调试。实际的移动设备在html,body {min-width:1024px;} 上运行良好。我还加入了<meta name="viewport" content="user-scalable=yes"> 以取消对某些内容的响应。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

使用元标记这样做

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

initial-scale --- 访问页面时的初始缩放。 1.0 不缩放。

minimum-scale --- 访问者可以在页面上缩放的最小量。 1.0 不缩放。

maximum-scale --- 访问者可以在页面上放大的最大量。 1.0 不缩放。

user-scalable ---- 允许设备放大和缩小。值为是或否。

Source

【讨论】：

是的，但我上面的代码包含那个确切的元标记。我也试过："user-scalable=yes" 和 "width=1024"。两者在加载时仍然会导致隐藏内容。双击显示。
谢谢。也会监控这个问题。到目前为止，提到的 body { float:left; min-width:1024px; } 技巧没有帮助。