¿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.
Aquí hay un enlace a uno de los simuladores basados en navegador que puede usar para probar el modo horizontal del iPad http://alexw.me/ipad2/#!safari
Venkat - Open IT
Respuestas:
277
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:
¿Son estos para el iPad 2 con iOS 5.x? ipad 1 ejecuta ios 4.x no tiene una barra de pestañas debajo de la barra de direcciones.
Ericson578
Ericson578: Estos son todos para ipad 1.
Paul Rademacher
2
1024x1024 es ese error tipográfico?
Ciantic
@Ciantic No es un error tipográfico, me temo.
kim3er
13
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.
Muchas gracias por la respuesta. Estoy de acuerdo. Todavía no puedo pagar un iPad. Tengo la impresión de que la mayoría de las personas mirarán las páginas web en orientación vertical en lugar de horizontal. Sé que lo haría. Y gracias por el recordatorio de Finger Friendly. ¡Muy cierto! Gracias. Erik
Erik
44
768x1024 no tiene en cuenta el tamaño de la barra de direcciones y las pestañas, y es diferente según el ipad (1 o 2, y entre ios 4 y 5)
Ericson578
0
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{
}
}
Respuestas:
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:
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">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">fuente
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.
fuente
Puedes probar esto:
fuente