Twitter Bootstrap在Webkit（Chrome，Safari）上以不同方式放大文本

Question

我正在研究使用Twitter Bootstrap（與一些定製）進行網站重建。

一個問題是頁面/文本放大Webkit瀏覽器，如Chrome和Safari。這些在縮放時不會將文本重新封裝到屏幕上。相反，文本繼續離開需要水平滾動的頁面。

例如，比較縮放Chrome/Safari和Firefox上的Bootstrap主頁上的文本 - 在Firefox上，即使響應菜單欄在由於縮放而沒有足夠空間放置菜單文本時也能正常工作。

這似乎是一個已知的基於像素佈局的Webkit「功能」，可以通過使用基於em的寬度來解決，這對標準Bootstrap來說看起來不切實際（改變和維護的方式太多）。

那麼，有沒有任何Bootstrap衍生物圍繞着它使用基於em的寬度，或者有什麼方法可以添加一段css等來解決這個問題？這是迄今爲止唯一阻止我在此項目上使用Bootstrap的方法。我希望該網站可供低視力用戶使用，而這些用戶通常會縮放。

如果Webkit修復了像其他瀏覽器引擎一樣的錯誤/功能，但我很快就看不到這種情況很快就會發生。

[更新]需要說明的是，這是對Firefox的完全類似行爲：縮放文本保留在列內，並且媒體查詢實現了文本縮放時調整菜單時屏幕上的空間有限和相應的列數。流體佈局有助於約束主要文章文本，但縮放時，Chrome/Safari上的菜單和邊欄仍然很混亂。

Answer 1

羅布，

您可以通過在引導流體容器中，然後設置其最大寬度屬性的百分比寬度的東西，如完成你想要的：

[class*="container-"] { 
margin: auto; 
padding: 0 20px; 
max-width: 90%; 
} 

HTML代碼將如下類似於：

<div class="content"> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span12"> 
       put your contents in here 
      </div> 
     </div> 
    </div> 
</div> 

其中類內容的div不在容器內且可用作背景。這就是我如何設置自舉站點，並在safari和firefox中嘗試使用您正在查找的結果。正如你所提到的，渲染必須使用瀏覽器的渲染引擎（如果是Safari瀏覽器，則使用firefox和webkit進行壁虎）。希望這能爲你解決問題。

Answer 2

您可以設置滑塊作爲無障礙選項爲您的網站的低視力遊客.. 只需使用文本縮放使用jQuery。無需放大頁面。 看到這個例子：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('a').click(function() { 
      var os = $('p').css('font-size'); 
      var num = parseFloat(os, 10); 
      var px = os.slice(-2); 

      $('p').css('font-size', num/1.4 + px); 
      if (this.id == 'larger') { 
       $('p').css('font-size', num * 1.4 + px); 
      } 
     }); 
    }); 
</script> 

<a href="#" id ="larger">Larger [+]</a> 
<br> 
<a href="#" id="smaller">Smaller [-]</a> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p>