ANCHO Y ALTO del navegador iPad estándar

¿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

 122
width
Author: Erik, 2010-07-31
Source

3 answers

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

Cuando la página no tiene etiqueta meta viewport:

  • Retrato: 980x1208
  • Paisaje: 980x661

Cuando page tiene cualquiera de estas dos meta etiquetas:

<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
 272
Author: Paul Rademacher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-16 00:18:48

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 adaptarse a la pantalla, momento en el que el usuario puede acercar y alejar libremente.

Dicho esto, puede diseñar su página para minimizar la cantidad de zoom necesario. Tu mejor apuesta es hacer que el ancho y la altura sean los mismos que la resolución más baja del iPad, ya que no sabes de qué manera está orientado; en otras palabras, harías que tu página fuera 768x768, para que se ajuste bien en la pantalla del iPad si está orientado a ser 1024x768 o 768x1024.

Lo que es más importante, te gustaría diseñar tu página con controles grandes con mucho espacio que sean fáciles de golpear con los pulgares: podrías diseñar fácilmente una página de 768x768 que estuviera muy desordenada y, por lo tanto, requiriera mucho zoom. Para lograr esto, es probable que desee dividir sus controles entre un número de páginas web.

Por otro lado, no es la búsqueda que más vale la pena. Si mientras diseñas, encuentras oportunidades para hacer que tu página sea más "amigable con los dedos", entonces hazlo...pero la realidad es que los usuarios de iPad se sienten muy cómodos con moverse y hacer 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, probablemente quieras diseñarlo para que sea propicio para este tipo de navegación.

Haga cajas con datos agrupados relevantes que puedan ser fácilmente tocados dos veces para enfocarse, y mantenga los controles relacionados cerca de cada uno otro. Lo más probable es que los usuarios de iPad aprecien una página que facilita la navegación familiar de zoom y panorámica a la que están acostumbrados más que una página que tiene menos controles para que no tengan que hacerlo.

 13
Author: macamatic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-30 22:21:45

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{

        }
    }
 0
Author: José Moreira de Freitas Junior,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-25 13:53:10