width - name - clear cache safari iphone

Estándar de ANCHURA y ALZO del navegador iPad

Question

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

Gracias.

Erik

Answer 1

El ancho y la altura de píxeles de su página dependerán de la orientación y de la etiqueta de la metaportada, si está especificada. Estos son los resultados de ejecutar jquery''s $ (window) .width () y $ (window) .height () en el navegador del iPad 1.

Cuando la página no tiene una etiqueta de metaportp:

• 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

Answer 2

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 que 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ías tu página 768x768, para que encaje bien en la pantalla del iPad, ya sea que esté orientada a 1024x768 o 768x1024.

Lo que es más importante, querrá diseñar su página con grandes controles con mucho espacio que sea fácil de manejar con los pulgares: podría diseñar fácilmente una página de 768 x 768 muy saturada y, por lo tanto, requería un gran acercamiento. Para lograr esto, es probable que desee dividir los controles entre varias páginas web.

Por otro lado, no es la actividad más valiosa. Si al diseñar encuentras oportunidades para hacer que tu página sea más "amigable para los dedos", apúntate ... pero la realidad es que los usuarios de iPad se sienten muy cómodos moviéndose y haciendo zoom dentro y fuera 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 fácilmente para enfocarlos y mantener los controles relacionados cerca el uno del otro. Es muy probable que los usuarios de iPad aprecien una página que les facilite la familiar navegación con zoom y panorámica a la que están acostumbrados más que una página que tenga menos controles para que no tengan que hacerlo.

Answer 3

Puedes intentar 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{
}
}