Creazione di siti Web per dispositivi mobili può essere difficile se si considera la gamma di browser e dimensioni dello schermo disponibile. L'iPad di Apple è una semplice piattaforma per la progettazione per grazie alla sua risoluzione standard dello schermo e l'uso del browser Safari. Per ottenere la vostra pagina Web per "agganciare" ai bordi dello schermo non importa quali zoom livello o l'orientamento dell'utente è a, è necessario utilizzare tag HTML specifici progettati per il controllo di questa funzionalità.

Istruzioni

1

Aprire un nuovo documento HTML in un editor di HTML o di testo. Per utilizzare la funzionalità di HTML5 in tutto il vostro disegno, sarà necessario iniziare il documento con il <! DOCTYPE html > Dichiarazione. Creare il resto della struttura del documento di importazione di codice da un disegno esistente o utilizzando un insieme di ossa nude di tag. Per esempio:

<! DOCTYPE html >

< head >

< / head >

< corpo >

< header >

< / intestazione >

< articolo >

< sezione >

< / sezione >

< sezione >

< / sezione >

< / articolo >

< piè di pagina >

< / piè di pagina >

< / body >

< / html >

2

Inserire una riga vuota sotto il tag "testa" e inserire il metatag "finestra". Safari utilizza questo tag per controllare come il contenuto viene visualizzato nella finestra del browser. Per consentire la viewport scattare ai tuoi contenuti in orientamento verticale o orizzontale, utilizzare il "larghezza = dispositivo larghezza" valore:

< nome meta = "finestra" content = "larghezza = dispositivo larghezza" >

Si possono anche tenere gli spettatori dal ridimensionamento della pagina aggiungendo un valore "utente-scalabile":

< nome meta = "finestra" content = "larghezza = dispositivo-larghezza, utente-scalabile: nessun" >

Questa opzione consente di disattivare la capacità dell'utente di ingrandire o rimpicciolire al fine di mantenere il contenuto della pagina bloccato alle dimensioni dello schermo.

3

Creare un foglio di stile per la tua 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 principale contenuto di 980 pixel per la modalità orizzontale o 768 pixel per il ritratto. Quando ottimizzato per l'orientamento verticale, il tag viewport consente il contenuto riempire lo schermo quando lo spettatore si trasforma il dispositivo, anziché visualizzare spazio vuoto ai lati. Quando ottimizzato per la modalità orizzontale, il riquadro di visualizzazione verrà automaticamente scalati contenuto per inserire comodamente all'interno dello spazio più stretto verso il basso.

Consigli & Avvertenze

• Utilizzare i valori percentuali per i formati di immagine per permettere loro di scalare correttamente quando gli utenti visualizzano la pagina Web in un orientamento. È anche possibile utilizzare Media query CSS per impostare i parametri di stile CSS specifici a seconda dell'orientamento che è utilizzando il visualizzatore. Per esempio:
• @media solo schermo e (min-dispositivo-larghezza: 481px) e (max-device-width: 768px) {
• IMG {
• Larghezza massima: 700px;
• }
• }
• @media solo schermo e (min-dispositivo-larghezza: 481px) e (max-device-width: 1024px) {
• IMG {
• Larghezza massima: 940px;
• }
• }