Responsive Web Design e ad alta risoluzione display (iPhone 4/5)

Di recente ho iniziato giocando in giro con il web design reattivo e hanno fatto un test di base qui:Responsive Web Design e ad alta risoluzione display (iPhone 4/5)

http://test.studev.net/

Funziona bene in un browser desktop tuttavia, mi sento un po 'confuso su come gestire il design di larghezza minore quando viene caricato su un dispositivo ad alta risoluzione, ad esempio i display retina sugli iPhone. A causa di questo tipo di display significa ad esempio la dimensione 16px che è normale leggere su un desktop è impossibile leggere su un iPhone 4/5.

Come si gestisce di solito questo?

fonte

2013-04-17 stu177

avete considerato solo di lasciare la base di font-size da solo e con unità relative (come 'em') per la regolazione del font-size di grandi/elementi più piccoli? – cimmanon

Potresti spiegare un po 'di più su come farlo? – stu177

Il suo significato è che si lascia il testo "normale" alla dimensione del carattere predefinita. Quando hai bisogno di dimensioni maggiori o minori, puoi modificarlo in percentuale: http://codepen.io/cimmanon/pen/GjDwe. Anche lettura utile: http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/ e http://blog.cloudfour.com/the-ems-have -it-proportional-media-queries-ftw/ – cimmanon

Bene o se si vuole rendere il testo più piccolo sul cellulare o più grande si farebbe

@media screen and (max-width: 480px) { 
    font-size: 10px; /* Smaller */ 
}

@media screen and (max-width: 480px) { 
    font-size: 20px; /*Larger*/ 
}

E assicurarsi di avere questo il vostro <HEAD> tag:

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

Oppure si può anche disattivare lo zoom in questo modo:

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

E per il supporto IE10, provare:

@-ms-viewport{ 
    width:device-width 
}

fonte

2013-04-17 20:58:51 iConnor

Gli utenti in genere non apprezzano quando si disattiva lo zoom ('massima scala = 1'). – cimmanon

Grazie per il suggerimento! – iConnor

Sembra che il codice meta vista sia fatto, rendendo tutto il mio iPhone molto più leggibile usando la stessa dimensione font sul desktop e sul dispositivo mobile. Saluti. – stu177

È possibile scegliere la dimensione del carattere in base alla schermata-width:

/* Large desktop */ 
    @media (min-width: 1200px) { 
     font-size: 18px; 
    } 

    /* Portrait tablet to landscape and desktop */ 
    @media (min-width: 768px) and (max-width: 979px) { 
     font-size: 16px; 
    } 

    /* Landscape phone to portrait tablet */ 
    @media (max-width: 767px) { 
     font-size: 14px; 
    } 

    /* Landscape phones and down */ 
    @media (max-width: 480px) { 
     font-size: 12px; 
    }

per assicurarsi che il tratto di layout sullo schermo mobile è necessario utilizzare la finestra meta tag:

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

Questo meta tag deve essere all'interno del tag head. La "larghezza del dispositivo" sarà il massimo pixel che il tuo schermo può mostrare. È inoltre possibile impostare un valore costante lì (600px).

La scala iniziale = 1 significa che verrà ingrandito automaticamente al 100%. (0,5 => 50%)

fonte

2013-04-17 20:44:48

Quindi questo renderebbe il testo più piccolo il dispositivo più piccolo? Questo è un po 'l'opposto del problema, il testo deve essere più grande su un dispositivo ad alta risoluzione, il problema è semplicemente rendere il testo molto più grande quando la larghezza massima è ad esempio 480px o 767px è che se una finestra del browser desktop è ristretto a queste dimensioni, quindi il testo diventa enorme. – stu177

Quindi ridurresti il testo su una query media più piccola. – iConnor

Riduce il testo a una risoluzione inferiore.risoluzione solitamente più piccola! = schermo più piccolo, solo meno pixel in esso. Quando si utilizza il design reattivo si aggiunge il viewport del meta tag. Sarà "allungare" il layout su tutto lo schermo e 16px per font-size sarà abbastanza buono. Oggigiorno, alcuni browser mobili ingrandiscono la dimensione del carattere del contenuto, indipendentemente dal valore della "dimensione del carattere", quindi sarebbe più leggibile. –

Responsive Web Design e ad alta risoluzione display (iPhone 4/5)

risposta

Problemi correlati