August 6
Creazione di siti web per dispositivi mobili può essere difficile se si considera la gamma di browser e dimensioni dello schermo disponibili. L'iPad di Apple è una piattaforma semplice da progettare per causa della sua risoluzione dello schermo di serie e l'uso del browser Safari. Per ottenere la vostra pagina Web a "scatto" per i bordi dello schermo, non importa quale livello di zoom o l'orientamento l'utente è in, è necessario utilizzare i tag HTML specifici volti a controllare questa funzionalità.
1 Aprire un nuovo documento HTML in un editor di testo o HTML. Per utilizzare la funzionalità HTML5 per tutto il vostro disegno, è necessario avviare il documento con il <! DOCTYPE html> dichiarazione. Creare il resto della vostra struttura del documento importando il codice da un progetto esistente, oppure utilizzando un nudo ossa set di tag. Per esempio:
<! DOCTYPE html>
<Head>
</ Head>
<Body>
<Header>
</ Header>
<Article>
<Section>
</ Section>
<Section>
</ Section>
</ Article>
<Footer>
</ Piè di pagina>
</ Body>
</ Html>
2 Inserire una riga vuota sotto il tag "testa" e inserire la "finestra" meta tag. Safari utilizza questo tag per controllare la visualizzazione del contenuto all'interno della finestra del browser. Per consentire la finestra per scattare ai tuoi contenuti in orientamento verticale o orizzontale, utilizzare il "width = device-width" Valore:
<Meta name = "finestra" content = "width = device-width">
È inoltre possibile mantenere gli spettatori dal ridimensionamento della pagina aggiungendo un valore "user-scalabile":
<Meta name = "viewport" content = "width = device-width, user-scalabile: no">
Questa opzione consente di disattivare la capacità dell'utente di ingrandire o ridurre al fine di mantenere il contenuto della pagina bloccata in alle dimensioni dello schermo.
3 Creare un foglio di stile per la vostra pagina o aprire il foglio di stile esistente. Decidere se si desidera ottimizzare i contenuti per orientamento verticale o orizzontale. Impostare la larghezza del contenitore contenuto principale a 980 pixel per la modalità orizzontale o 768 pixel per ritratto. Quando ottimizzato per l'orientamento verticale, il tag viewport permette tuoi contenuti per riempire lo schermo quando lo spettatore si trasforma il dispositivo, invece di visualizzare lo spazio vuoto ai lati. Quando ottimizzato per la modalità orizzontale, la finestra scalerà automaticamente i contenuti per adattarsi perfettamente all'interno dello spazio ristretto.