如何在手机上强制缩小或缩小宽度？

问题描述：

我有一个很大程度上响应的网站，建立在Bootstrap 2.3上。但是我需要缩小一页来适应那些不起作用的项目。如果我双击，它会完美缩小。但我想默认这种方式。如何在手机上强制缩小或缩小宽度？

skitch

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

UPDATE

唉。我使用Google Chrome移动模拟进行调试。实际的移动设备可以正常使用html，body {min-width：1024px;}。我也投入去解除某些内容。

专业提示：不要依赖Google Chrome手机模拟。

其实我的屁股并不完全准确。当我通过双击缩小时，导航按比例收缩，而不是保持全宽。期望的结果如图所示，但到目前为止，我无法做到这一点。 – Ryan 2014-09-13 08:21:01

呃。我使用Google Chrome移动模拟进行调试。实际的移动设备可以正常使用'html，body {min-width：1024px;}'。我向'meta name =“viewport”content =“user-scalable = yes”>扔了一些内容。 – Ryan 2014-09-13 09:27:09

答

使用meta标签访问该页面时，这样做

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

初始规模---最初的变焦。 1.0不缩放。

minimum-scale ---访客可以放大页面的最小数量。 1.0不缩放。

最大比例---访客可以放大页面的最大数量。 1.0不缩放。

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

Source

没错，但是我上面的代码包含了精确的元标记。我也试过：''user-scalable = yes“'和'”width = 1024“'。加载后，两者仍然会导致隐藏的内容。双击显示。 – Ryan 2014-09-13 08:37:39

同类问题http://*.com/q/25821417/3008050 – karan3112 2014-09-13 08:47:23

谢谢。也会监视这个问题。到目前为止，'body {float：left;最小宽度：1,024; }提到的技巧没有帮助。 – Ryan 2014-09-13 08:56:42

如何在手机上强制缩小或缩小宽度？

相关推荐