Twitter Bootstrap ingrandisce il testo in modo diverso su Webkit (Chrome, Safari)

Question

Sto cercando di utilizzare Twitter Bootstrap (con alcune personalizzazioni) per la ricostruzione di un sito.

Un problema è con lo zoom di pagine/testo sui browser Webkit come Chrome e Safari. Questi non rewrap il testo sullo schermo durante lo zoom. Invece il testo continua fuori dalla pagina che richiede lo scorrimento orizzontale.

Per un esempio, confrontare lo zoom del testo nella home page di Bootstrap su Chrome/Safari e Firefox - su Firefox anche la barra dei menu reattiva funziona correttamente quando non c'è abbastanza spazio per il testo del menu a causa dello zoom.

Questa sembra essere una "funzione" Webkit nota con layout basati su pixel, che può essere risolta utilizzando larghezze basate su em, che appare poco pratico con il Bootstrap standard (troppo da modificare e mantenere).

Quindi, c'è qualche derivato Bootstrap attorno al quale si utilizzano larghezze basate su em, o c'è un modo per aggiungere uno snippet di css ecc per aggirare il problema? È l'unica cosa che mi impedisce di utilizzare Bootstrap su questo progetto. Voglio che il sito sia accessibile agli utenti ipovedenti, che spesso eseguono lo zoom.

Sarebbe bello se Webkit risolvesse il bug/funzionalità di comportarsi come altri motori di browser, ma purtroppo non vedo che ciò accada presto.

[update] Giusto per essere chiari, è la piena azione simile a Firefox che sto cercando: lo zoom del testo rimane vincolato all'interno colonne e le media query realizzare lo spazio sullo schermo è limitata quando il testo è ingrandita e regolare il menu e il numero di colonne di conseguenza. I layout fluidi aiutano a limitare il testo dell'articolo principale, ma i menu e le barre laterali sono ancora un disastro su Chrome/Safari durante lo zoom.

Answer 1

Rob,

È possibile realizzare ciò che si desidera utilizzando un contenitore di fluido in bootstrap e quindi impostando la proprietà max-width ad una larghezza percentuale con qualcosa di simile:

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

l'html apparirebbe qualcosa come:

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

Dove il div del contenuto della classe non è all'interno del contenitore e può fungere da sfondo. Questo è il modo in cui ho il mio sito bootstrap impostato e ho appena provato in safari e firefox con i risultati che stai cercando. Come hai detto, il rendering deve fare il motore di rendering del browser (gecko nel caso di firefox e webkit nel caso di safari). Spero che questo chiarisca le cose per te.

Answer 2

È possibile impostare un cursore come accessibilità opzione per i più bassi visitatori visione del vostro sito .. Basta utilizzare il testo-ridimensionamento utilizzando jQuery. Non c'è bisogno di ingrandire la pagina. Vedere questo esempio:

<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>