Ridimensionamento dei caratteri di bootstrap troppo piccolo sul cellulare

Ho trascorso molto tempo a lavorare con Foundation e meno tempo a lavorare con Bootstrap. Sto avendo un problema con la reattività in Bootstrap che non capisco perché sembra funzionare in Foundation. Il problema è che, mentre la reattività della griglia funziona come previsto, i miei caratteri vengono ridimensionati in modo così piccolo da essere quasi illeggibili sui dispositivi mobili. Nota nel mio esempio qui sotto che ho impostato la dimensione del carattere su 14px, ma su mobile questo sta diventando molto piccolo. Puoi vederlo facendo clic sul pulsante mobile negli strumenti di Chrome Dev.Ridimensionamento dei caratteri di bootstrap troppo piccolo sul cellulare

il codice HTML per riprodurre questo è molto semplice, ecco un jsbin: http://jsbin.com/lumepumufu/1/

Ed ecco il codice HTML:

<html> 
    <head> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body style="font-size:14px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     </div> 
    </div> 
    </body> 
</html>

fonte

2015-01-02 Jim Cooper

Sei in quirks mode . – thebjorn

+18

Hai un meta tag di viewport all'interno del tag head come ''? – ckuijjer

@thebjorn Ottengo lo stesso risultato visualizzando il sito direttamente sul mio telefono. –

Si dovrebbe sempre iniziare da un modello, ad esempio, il "Modello base" (http://getbootstrap.com/getting-started/#template). Questo funziona come previsto:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body style="font-size:14px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     <div class="col-lg-4">col-lg-4</div> 
     </div> 
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    </body> 
</html>

Potrebbe sembrare un sacco di "cruff", ma tutto è lì per un motivo.

fonte

2015-01-02 19:38:24 thebjorn

+12

come ha detto @ziaprog, la chiave era '' – jjmontes

Tutto non è lì per un motivo. Questo è un problema CSS e non è necessario includere jquery o bootstrap javascript per questo solo scopo. Come menzionato nei commenti e nella risposta di seguito, '' è la risposta corretta. – kareblak

Nel contesto di qualcuno che sta iniziando con Bootstrap, come è il caso in questa domanda, sento ancora che l'approccio giusto è quello di iniziare con i modelli forniti. Man mano che acquisirai una comprensione più profonda dei meccanismi interni, adatterai naturalmente l'impalcatura alle esigenze specifiche del tuo progetto, ma sarebbe un modo molto frustrante per iniziare a imparare Bootstrap. – thebjorn

Bootstrap è mobile per primo. I primi stili mobili possono essere trovati in tutta la libreria invece che in file separati.

Per garantire una corretta riproduzione e toccare lo zoom, aggiungere il meta tag viewport alla testa

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

fonte

2015-05-26 13:19:07 ziaprog

Questa dovrebbe essere la risposta accettata – Clint

Questa è la risposta che dovrebbe essere accettata – Aaron

Se si esegue un'applicazione rotaie, si può provare la gemma rails_layout

fonte

2017-03-31 12:03:47 Feuda

Ridimensionamento dei caratteri di bootstrap troppo piccolo sul cellulare

risposta

Problemi correlati