CSS Font-size non funziona correttamente su un dispositivo mobile

Sto lavorando ad un piccolo progetto per la scuola, dove abbiamo incorporare html5 e css3. È solo all’inizio fase ora, come sto cercando di creare due distinte css file per un cellulare e una versione desktop.

Per la versione mobile, sto cercando di ottenere il menu per mostrare come un elenco, ma con un carattere più grande. Posso in alcun modo di ottenere questo lavoro, anche se.

Questo è il css del menu:

nav ul {
    list-style: none;
    background-color: green;
    padding: 0;
}

nav li {
    border-bottom: 1px solid black;
    padding: 5px;
}

nav {
    margin-top: -36px;
    width: 100%
}

nav h1{
    margin: 0;
}

Questo crea il seguente sul mio desktopCSS Font-size non funziona correttamente su un dispositivo mobile
E sul mio iPhoneCSS Font-size non funziona correttamente su un dispositivo mobile

Font-size è impostato per 1em nel codice HTML nella parte superiore del file. Ma 1em non è abbastanza grande per dispositivi mobili, in modo che io voglio qualcosa di più grande, che sembra impossibile.

Anche quando mi danno del nav h1 un font-size di 10em, non c’è niente di più grande di questo:
CSS Font-size non funziona correttamente su un dispositivo mobile

Mentre sul mio desktop funziona senza problemi, non ci sembra questo:CSS Font-size non funziona correttamente su un dispositivo mobile

Lo stesso problema si verifica quando tenta di fare il “post sul blog” più grande, solo che non lo farà.

Io di solito non hanno problemi a lavorare con i CSS, ma questa volta non riesco a capire. Spero qualcuno può aiutarmi! Ho la sensazione che qualcosa di molto evidente.

Ecco il CSS completo: http://snipt.org/zLic5

Qui è il codice html: http://snipt.org/zLid2

  • perché non dichiarare la dimensione del carattere in pixel invece di em? in una nota a margine, se si utilizza media query si può attaccare a un css e solo ignorare gli stili sono differenti tra i dispositivi.
  • C’è una spiegazione qui: stackoverflow.com/questions/750594/…. Hai messo tanto impegno nel chiedere la tua domanda, io non posso portare me stesso a votare per chiudere come un duplicato.
InformationsquelleAutor Rvervuurt | 2013-02-01

 

4 Replies
  1. 18

    ho visto il vostro codice html. non aggiungere alcun meta tag. alcuni meta tag sono tenuti, durante lo sviluppo del sito web mobile,

    per esempio devi aggiungere –

    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
    <title>Welcome to your school name</title>
    
    <!-- smart phone css  -->
    <link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
    
    <!-- Tablet -->
    <link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />
    
    <!-- Desktop -->
    <link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">
    • Ciao, Grazie per la tua risposta! Aggiungere i meta tag viewport risolto il problema! Naturalmente ho anche aggiunto altri metas. Io non sto usando i link per .css, perché sto usando @media screen per questo, quindi devo solo tenere traccia di un css.
    • Bella Risposta…. Grazie…
    • Grazie. Questo mi ha aiutato pure. Ho notato un errore di battitura, però, dovrebbe essere user-scalable (non “e”). Cheers
    • Grazie. Questo mi ha aiutato molto e mi ha salvato un sacco di lavoro
    • Questo non è un buon esempio… il meta tag viewport solo “width=device-width” è necessario che il sito in scala in modo appropriato. Inoltre, “maximum-scale=1.0” insieme con “user-scalable=no” è particolarmente grave in termini di accessibilità come questo le impostazioni di blocco zoom-in. Controllare: blog.javierusobiaga.com/…
  2. 1

    Cercare proprietà css text-size-adjust a scala di testo su dispositivi mobili. Qualcosa come:

    nav {
        text-size-adjust: 200%;
    }
    nav ul {
        text-size-adjust: 300%;
    }
    nav h1 {
        text-size-adjust: 400%;
    }
    • Grazie, questo ha risolto i miei problemi. Questo è sperimentale il modo: developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust Inoltre, ora posso vedere che il valore di default è per diversi dell’elemento dimensioni del tipo di carattere per cambiare con diverse quantità. Ho impostato al 250% per il body tag in modo che tutti gli elementi vorresti scala.
  3. 0

    Vedo un paio di cose che penso che può aiutare la vostra situazione. Dal punto di vista semantico, non si desidera utilizzare <h1> tag nel vostro menu di lista. Rimuovere i tag e applicare lo stile al nav li di stile css e regolare l’imbottitura di conseguenza. Inoltre, solo una raccomandazione, ma ho sentito da alcuni siti web, il mobile ideale ridimensionamento del tipo di carattere è pt.

    Spero che questo aiuta.

  4. 0

    Di tornare a utilizzare la li per voi di navigazione.

    Quindi impostare la dimensione del font a qualcosa di accettabile (14px o 16px).

    Poi, nel tuo css, utilizzare i media-query.

    @media (max-width: 480px) { //will only happen on viewport less then 480 pixels (mobile)
      li {
        font-size:18px; //larger font (or whatever you want to do
        padding: 20px; //can even increase your padding
      }
    }

Lascia un commento