title: Twitter Bootstrap zooms text differently on Webkit (Chrome, Safari)
body: <p>I'm looking into using Twitter Bootstrap (with some customisations) for a site rebuild.</p>
  
  <p>One problem is with page/text zooming on Webkit browsers like Chrome and Safari.  These don't rewrap the text to the screen when zooming.  Instead the text continues off the page requiring horizontal scrolling. </p>
  
  <p>For an example, compare zooming the text on the Bootstrap home page on Chrome/Safari and Firefox - on Firefox even the responsive menubar works properly when there's not enough room for the menu text due to zooming.  </p>
  
  <p>This seems to be a known Webkit "feature" with pixel-based layouts, which can be solved by using em-based widths, which looks impractical with the standard Bootstrap (way too much to change and maintain).</p>
  
  <p>So, is there any Bootstrap derivative around which uses em-based widths, or is there any way to add a snippet of css etc to work around the problem?  It's the only thing so far stopping me from using Bootstrap on this project. I want the site to be accessible for lower vision users, who often zoom.</p>
  
  <p>Would be nice if Webkit fixed the bug/feature to behave like other browser engines but I don't see that happening anytime soon unfortunately. </p>
  
  <p>[update]  Just to be clear, it's the full similar action to Firefox I'm after: zooming text stays constrained within columns, AND media queries realise the space on the screen is limited when text is zoomed and adjust the menu and number of columns accordingly.  Fluid layouts help with constraining main article text, but the menus and sidebars are still a mess on Chrome/Safari when zooming.</p>