Share
Ricordo il mio viaggio inaugurale nel responsive web design; Avevo usato una griglia classica, ho lottato con un layout flessibile e ho affrontato per la prima volta le query sui media. L'allungamento e il restringimento della finestra del browser ha portato alla visione soddisfacente del mio design che rispondeva a ciò che lo circondava. Poi l'ho provato su un cellulare. Non ha funzionato - stavo guardando una versione ridotta del design a schermo intero. La soluzione, come risultò, era semplice ...
Nota: Questo tutorial è stato pubblicato per la prima volta nel febbraio 2012, ma è spesso utilizzato come riferimento in altri tutorial (e le cose sono cambiate), quindi ho ritenuto che fosse necessario un aggiornamento.
Questo tutorial ti insegnerà come utilizzare il meta tag viewport da solo, ma se hai bisogno di aiuto nella creazione di un sito web reattivo, ci sono molti designer che ti aiuteranno su Envato Studio. Ecco alcune delle migliori opzioni:
Questo fornitore dal Regno Unito creerà un web design personalizzato e lo sviluppo basato sul tuo marchio, i colori, i requisiti di funzionalità e le migliori pratiche di usabilità. Il tuo sito web sarà unico per la tua azienda e impostato per la massima conversione.
Otterrai:
Se puoi gestire da solo lo sviluppo e vuoi solo un design, puoi scegliere questa opzione, che ti darà un sito web progettato in modo professionale. Ecco cosa otterrai:
Questo fornitore è un web designer freelance a tempo pieno, con oltre 12 anni di esperienza professionale in Web Design, Graphic Design e UI / UX User Interface Design.
Otterrai un elegante sito Web di una pagina progettato pensando al comportamento reattivo.
Se nessuna di queste opzioni è per te, o se preferisci imparare a farlo da solo, continua a leggere le istruzioni.
Se non leggi altro in questo post, prendi un po 'di consigli: se stai progettando in modo flessibile, utilizza il meta tag viewport nel tuo . Nella sua forma base, ti metterà a punto per la tranquillità della struttura cross-device:
Usiamo un layout di esempio che ho frustato insieme. Guarda; vedrai che si restringono e crescono man mano che modifichi le dimensioni del tuo browser. C'è anche una singola query multimediale che rende il testo più ampio e conferisce all'intestazione un aspetto brillante # ff333e colore su schermi più ampi. Bello.
Ecco come appare in OSX Chrome:
Ed ecco come appare quando la finestra del browser è schiacciata:
Ora vediamo come appare su uno smartphone (in questo caso iOS Safari su un iPhone 4):
La prima cosa che noterai è l'intestazione rossa; un omaggio a tutti che non stiamo guardando il layout stretto che ci aspetteremmo. Stiamo effettivamente guardando una versione ridotta.
iOS Safari presume che una pagina Web sia larga 980 px, con lo zoom in uscita per adattarsi all'intero lotto all'interno del disponibile (iPhone 4) 320 px. Il contenuto è quindi molto meno leggibile, a meno che non si ingrandisca.
Come si suol dire, l'ipotesi è la madre di tutti ... qualcosa, ma questo è esattamente ciò che i browser mobili devono fare se non li istruisci in modo specifico. Quando visiti un sito web tramite un browser mobile, questo presuppone che tu stia visualizzando una grande esperienza desktop e che tu voglia vedere tutto questo, non solo l'angolo in alto a sinistra. Imposta quindi la larghezza della vista su (nel caso di iOS Safari) 980px, salvando ogni cosa nel suo piccolo display.
Inserisci il meta tag viewport, introdotto da Apple, quindi adottato e sviluppato ulteriormente da altri.
Sembra questo:
All'interno del content = "" puoi inserire un carico di valori delimitati da virgola, ma per ora ci concentreremo su quelli fondamentali.
Ad esempio, se il tuo modello di cellulare è appositamente disposto a 320 px, puoi specificare la larghezza della vista:
Per i layout flessibili, è più pratico basare la larghezza della finestra sul dispositivo in questione, in modo da far corrispondere la larghezza del layout alla larghezza del dispositivo da inserire:
Per essere più sicuro che il tuo layout verrà visualizzato come previsto, puoi anche impostare il livello di zoom. Questo, per esempio:
... assicurerà che all'apertura, il layout verrà visualizzato correttamente in scala 1: 1. Non verrà applicato lo zoom. Potresti anche andare oltre e impedire qualsiasi ingrandimento da parte dell'utente:
Nota: Prima di applicare il parametro di massima scala, considera se dovresti davvero impedire agli utenti di eseguire lo zoom. Possono leggere tutto nel miglior modo possibile?
Utilizzare il meta tag viewport in modo errato può ostacolare gli utenti con problemi visivi nell'accedere al tuo sito web
- Il progetto di accessibilità
Questi valori insieme ci forniscono un ottimo valore predefinito per lavorare con:
Vediamo come influenza il nostro esempio
Come puoi vedere, tutto rimane nella scala corretta. Il testo si sta avvolgendo invece di restringersi e il nostro helper visivo (l'intestazione rossa) è scomparso.
Punta su Jason per averlo indicato nei commenti. Affermando che la larghezza del tuo layout è uguale alla larghezza del dispositivo, ti imbatterai in problemi quando un dispositivo viene utilizzato in orizzontale. Dai un'occhiata a come un iPhone 4 gestisce la nostra demo, in landscape:
Il browser si sente obbligato a eseguire lo zoom in avanti, per adattarsi alla larghezza della pagina.
Per aggirare questo, potremmo, come sottolinea Jason, utilizzare JavaScript per scegliere condizionalmente quali attributi metatag utilizzare, ma la soluzione più semplice sembra essere semplicemente ignorare il larghezza del tutto. Solo impostando il iniziale scala la larghezza è dedotta. Ecco come appare la nostra nuova demo semplificata nel panorama:
Il metatag di viewport è stata la soluzione di Apple al problema. È stato adottato rapidamente da altre piattaforme, ma non è mai stato presentato dal W3C. Microsoft lo ha portato alla luce quando ha scelto per IE10 di ignorare il metatag della vista in determinate circostanze. Invece, hanno scelto di utilizzare CSS Device Adaptation, che è a cosa si appoggia il W3C.
In breve, proprietà viewport simili sono definite all'interno del CSS usando la regola @viewport, invece che all'interno dell'HTML.
@viewport zoom: 1.0; larghezza: larghezza del dispositivo;
Oppure, in accordo con il nostro più recente non specificare la larghezza del dispositivo approccio, potremmo impostare quanto segue:
@viewport zoom: 1.0; larghezza: estensione-zoom;
Dato che è un work in progress, IE10 richiede la versione prefissata della proposta, che assomiglia a qualcosa del genere:
@ -ms-viewport width: estendi-to-zoom; zoom: 1.0;
È una soluzione molto più elegante rispetto al metatag, ma è ben lungi dall'essere completamente supportata. Inseriscilo ora nel tuo CSS, per assicurarti che il tuo design reattivo si comporti da solo nella "modalità snap" di IE10 e tieni d'occhio i suoi progressi in futuro. È qui che si dirige il controllo della vista.
Puoi leggere di più su questo in Tim Kadlec Post IE10 Snap Mode e Responsive Design.
Il responsive web design non è solo per le persone che amano guardare i propri browser crescere e rimpicciolirsi, si tratta di fornire il maggior numero di dispositivi, schermi e risoluzioni possibili! Inserisci il meta tag viewport nel tuo , oltre alla regola @viewport nel tuo CSS quando stai costruendo layout flessibili e sei a posto.
Puoi anche trovare migliaia di temi e modelli reattivi di alta qualità su ThemeForest e una vasta gamma di script, plug-in e componenti aggiuntivi nella categoria "responsive" su CodeCanyon.
Accentsconagua