iPad ancho y ancho estándar del navegador

¿Alguien sabe el ancho y la altura más seguros para el CUERPO al ver cualquier página web en el iPad? Quiero evitar las barras de desplazamiento tanto como sea posible.

Gracias.

Erik

El ancho y la altura de los píxeles de su página dependerán de la orientación, así como de la etiqueta de meta viewport, si se especifica. Estos son los resultados de ejecutar jquery's $ (window) .width () y $ (window) .height () en el navegador iPad 1.

Cuando la página no tiene una etiqueta meta viewport:

• Retrato: 980x1208
• Paisaje: 980x661

Cuando la página tiene cualquiera de estas dos metaetiquetas:

<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">

• Retrato: 768x946
• Paisaje: 1024x690

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

• Retrato: 768x946
• Paisaje: 768x518

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

• Retrato: 980x1024
• Paisaje: 980x1024

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

• Retrato: 768x1024
• Paisaje: 768x1024

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

• Retrato: 768x1024
• Paisaje: 1024x1024

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

• Retrato: 831x1024
• Paisaje: 1520x1024

No hay una respuesta simple a esta pregunta. La versión móvil de Apple de WebKit, utilizada en iPhones, iPod Touch y iPads, escalará la página para que se ajuste a la pantalla, momento en el cual el usuario puede acercar y alejar la imagen libremente.

Dicho esto, puede diseñar su página para minimizar la cantidad de zoom necesaria. Su mejor opción es hacer que el ancho y la altura sean iguales a la resolución más baja del iPad, ya que no sabe en qué dirección está orientado; en otras palabras, haría que su página sea de 768x768, para que se ajuste bien en la pantalla del iPad, ya sea que esté orientada a 1024x768 o 768x1024.

Más importante aún, querrá diseñar su página con grandes controles con mucho espacio que sean fáciles de golpear con los pulgares: puede diseñar fácilmente una página de 768x768 que esté muy abarrotada y, por lo tanto, requiera mucho zoom. Para lograr esto, es probable que desee dividir sus controles entre varias páginas web.

Por otro lado, no es la búsqueda más valiosa. Si mientras diseña encuentra oportunidades para hacer que su página sea más "amigable con los dedos", entonces hágalo ... pero la realidad es que los usuarios de iPad se sienten muy cómodos moviéndose y acercándose y alejándose de la página para llegar a las cosas porque Es necesario en la mayoría de los sitios web. En todo caso, es probable que desee diseñarlo para que sea propicio para este tipo de navegación.

Haga cuadros con datos agrupados relevantes que se puedan tocar dos veces fácilmente para enfocarse y mantenga los controles relacionados cerca uno del otro. Los usuarios de iPad probablemente apreciarán una página que facilite la familiar navegación de zoom y desplazamiento a la que están más acostumbrados que una página que tenga menos controles para que no tengan que hacerlo.

Puedes probar esto:

    /*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{

        }
    }