Tipo di carattere CSS non funziona correttamente sul dispositivo mobile

Question

Sto lavorando a un piccolo progetto per la scuola, in cui dobbiamo incorporare html5 e css3. È solo nella fase iniziale ora, mentre sto cercando di creare due file css separati per una versione mobile e desktop.

Per la versione mobile, sto cercando di visualizzare il menu come elenco, ma con un font più grande. Non posso in nessun modo far funzionare questo però.

Questo è il css per il 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 desktop E sul mio iPhone

Il font-size è impostato su 1em nel codice HTML nella in cima al file. Ma 1em non è abbastanza grande per i dispositivi mobili, quindi lo voglio più grande, il che sembra impossibile.

Anche quando do il nav h1 un font-size di 10em, non ottiene più grande di questo:

Mentre sul mio desktop funziona senza problemi, ci sembra che questo:

Lo stesso problema si verifica quando si cerca di ingrandire i "post del blog", semplicemente non lo fanno.

Normalmente non ho problemi a lavorare con i CSS, ma questa volta non riesco a capirlo. Spero che chiunque può aiutare! Ho la sensazione che sia qualcosa di molto ovvio.

Ecco la completa CSS: http://snipt.org/zLic5

Ecco il codice html: http://snipt.org/zLid2

Answer 1

ho visto il tuo codice html. non stai aggiungendo alcun meta tag. sono tenuti alcuni meta tag, quando si sviluppa sito web mobile,

ad esempio si deve 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)"> 

Answer 2

vedo un paio di cose che penso possa aiutare la vostra situazione. Semanticamente, non si desidera utilizzare i tag <h1> nell'elenco dei menu. Rimuovere tali tag e applicare lo stile allo stile css nav li e regolare di conseguenza il padding. Inoltre, solo una raccomandazione, ma ho sentito da alcuni siti Web che il dimensionamento dei caratteri mobili ideale è pt.

Spero che questo aiuti.

Answer 3

Torna a utilizzare il li per la navigazione.

Quindi impostare la dimensione del carattere su qualcosa di accettabile (14px o 16px).

Quindi, nel proprio css, utilizzare 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 
    } 
} 

Answer 4

proprietà Prova css text-size-adjust per scalare il testo su dispositivi mobili. Qualcosa di simile:

nav { 
    text-size-adjust: 200%; 
} 
nav ul { 
    text-size-adjust: 300%; 
} 
nav h1 { 
    text-size-adjust: 400%; 
}