如何在手機上強制縮小或縮小寬度？

我有一個很大程度上響應的網站，建立在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手機模擬。

來源

2014-09-13 Ryan

其實我的屁股並不完全準確。當我通過雙擊縮小時，導航按比例收縮，而不是保持全寬。期望的結果如圖所示，但到目前爲止，我無法做到這一點。 – 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

來源

2014-09-13 08:35:22 karan3112

沒錯，但是我上面的代碼包含了精確的元標記。我也試過：''user-scalable = yes「'和'」width = 1024「'。加載後，兩者仍然會導致隱藏的內容。雙擊顯示。 – Ryan 2014-09-13 08:37:39

同類問題http://stackoverflow.com/q/25821417/3008050 – karan3112 2014-09-13 08:47:23

謝謝。也會監視這個問題。到目前爲止，'body {float：left;最小寬度：1,024; }提到的技巧沒有幫助。 – Ryan 2014-09-13 08:56:42

如何在手機上強制縮小或縮小寬度？

回答

相關問題