Browser iPad LARGHEZZA E ALTEZZA standard

Qualcuno conosce la larghezza e l'altezza più sicure per il CORPO quando si visualizzano pagine Web sull'iPad? Voglio evitare le barre di scorrimento il più possibile.

Grazie.

Erik

La larghezza e l'altezza dei pixel della pagina dipenderanno dall'orientamento e dal tag meta viewport, se specificato. Ecco i risultati dell'esecuzione di $ (window) .width () e $ (window) .height () di jquery sul browser iPad 1.

Quando la pagina non ha tag meta viewport:

• Ritratto: 980x1208
• Paesaggio: 980x661

Quando la pagina ha uno di questi due metatag:

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

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

• Ritratto: 768x946
• Paesaggio: 1024x690

Con <meta name="viewport" content="width=device-width">:

• Ritratto: 768x946
• Paesaggio: 768x518

Con <meta name="viewport" content="height=device-height">:

• Ritratto: 980x1024
• Paesaggio: 980x1024

Con <meta name="viewport" content="height=device-height,width=device-width">:

• Ritratto: 768x1024
• Paesaggio: 768x1024

Con <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• Ritratto: 768x1024
• Paesaggio: 1024x1024

Con <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• Ritratto: 831x1024
• Paesaggio: 1520x1024

Non esiste una risposta semplice a questa domanda. La versione mobile di Apple di WebKit, utilizzata in iPhone, iPod Touch e iPad, ridimensionerà la pagina per adattarla allo schermo, a quel punto l'utente può ingrandire e rimpicciolire liberamente.

Detto questo, puoi progettare la tua pagina per ridurre al minimo la quantità di zoom necessaria. La tua scommessa migliore è rendere la larghezza e l'altezza uguali alla risoluzione più bassa dell'iPad, poiché non sai in che modo è orientato; in altre parole, faresti la tua pagina 768x768, in modo che si adatti bene allo schermo dell'iPad sia che sia orientata a 1024x768 o 768x1024.

Ancora più importante, vorresti progettare la tua pagina con grandi controlli con un sacco di spazio che è facile da colpire con i pollici - potresti facilmente progettare una pagina 768x768 che era molto ingombra e quindi richiedeva un sacco di zoom. Per fare ciò, probabilmente vorrai dividere i tuoi controlli tra un numero di pagine web.

D'altra parte, non è l'inseguimento più utile. Se durante la progettazione trovi opportunità per rendere la tua pagina più "intuitiva", allora provaci ... ma la realtà è che gli utenti iPad sono molto a loro agio nel muoversi e nello zoomare avanti e indietro dalla pagina per arrivare alle cose perché è necessario sulla maggior parte dei siti web. Semmai, probabilmente vuoi progettarlo in modo che sia favorevole a questo tipo di navigazione.

Crea caselle con dati raggruppati pertinenti che possono essere facilmente toccati due volte per concentrarsi e mantenere i relativi controlli vicini l'uno all'altro. Gli utenti di iPad apprezzeranno molto probabilmente una pagina che facilita la familiare navigazione con zoom e panoramica a cui sono abituati più di quanto non facciano una pagina che ha meno controlli in modo da non doverlo fare.

Puoi provare questo:

    /*iPad landscape oriented styles */

    @media only screen and (device-width:768px)and (orientation:landscape){
        .yourstyle{

        }

    }

    /*iPad Portrait oriented styles */

    @media only screen and (device-width:768px)and (orientation:portrait){
        .yourstyle{

        }
    }