¿Alguien conoce el ancho y la altura más seguros para el BODY al visualizar cualquier página web en el iPad? Quiero evitar las barras de desplazamiento tanto como sea posible.Navegador para iPad estándar WIDTH & HEIGHT
Gracias.
Erik
El ancho y la altura de píxeles de su página dependerán de la orientación y de la etiqueta de metadapa, si se especifica. 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 ninguna etiqueta ventana meta:
Cuando página tiene cualquiera de estas dos etiquetas meta:
<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">
Con <meta name="viewport" content="width=device-width">:
Con <meta name="viewport" content="height=device-height">:
Con <meta name="viewport" content="height=device-height,width=device-width">:
Con <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
Con <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
¿Son estos para el iPad 2 con ios 5.x? ipad 1 con ios 4.x no tiene una barra de pestañas debajo de la barra de direcciones. – Ericson578
lista dulce! Gracias. – uday
Ericson578: Todos estos son para ipad 1. –
No hay una respuesta simple para 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 sean fáciles de manejar con los pulgares: podría diseñar fácilmente una página de 768x768 que requiriese mucho zoom. Para lograr esto, es probable que desee dividir los controles entre varias páginas web.
Por otro lado, no es la actividad que más vale la pena. 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.
Crea cuadros con los datos agrupados relevantes que se pueden 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.
Muchas gracias por la respuesta. Estoy de acuerdo. No puedo pagar un iPad todavía. Me da la impresión de que la mayoría de las personas mirará páginas web en orientación vertical en lugar de paisaje. Sé que lo haría. Y gracias por el recordatorio de Finger Friendly. ¡Muy cierto! Gracias. Erik – Erik
enlace útil: http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/ –
768x1024 no tiene en cuenta el tamaño de el urlbar y las pestañas, y es diferente dependiendo del ipad (1 o 2, y entre ios 4 y 5) – Ericson578
Puede 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{
}
}
Aquí hay un enlace a uno de los simuladores basados en navegador que puede utilizar para probar el modo horizontal de iPad [http://alexw.me/ipad2 /#!safari](http://alexw.me/ipad2/#!safari) –