Ampliar el ancho de la vista de Mobile Safari cuando el iPad está en orientación vertical? -

Estoy trabajando en un sitio web que está diseñado para funcionar mejor cuando se lo visualiza en modo horizontal en iPad. Todo está en un contenedor de 1024 px de ancho <div>. Sin embargo, todavía estoy obligado a escalar la ventana gráfica para que cuando el usuario convierta el iPad en orientación vertical, el usuario no tenga que alejarse o desplazarse horizontalmente para ver todo en la página.Ampliar el ancho de la vista de Mobile Safari cuando el iPad está en orientación vertical? -

Actualmente tengo esta etiqueta <meta> en mi <head>:

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />

Todo lo muestra bien cuando se ve la página en modo horizontal, pero no puedo conseguir el comportamiento requerido antes mencionado retrato de trabajar. Traté de cambiar el initial-scale al 0.75, y sucede exactamente lo contrario: todo encaja en modo vertical, pero hay espacio horizontal adicional cuando el iPad está en modo horizontal.

¿Existe alguna configuración de CSS, Javascript o ventana especial que pueda usar para que funcione?

P.S. No puedo usar user-scalable=no.

Fuente

2011-06-29 Phil

Incluso puede agregar las propiedades de orientación dentro del mismo CSS que usa para los navegadores de escritorio ... Solo necesita agregar lo siguiente;

@media only screen and (device-width:768px)and (orientation:portrait) 
/*iPad Portrait orientation styles */ 

@media only screen and (device-width:768px)and (orientation:landscape) 
/*iPad landscape orientation styles */

Una vez más recordar para el iPad, el dispositivo de ancho de 768px es siempre independientemente de la orientación ... Sé que es confuso, pero esa es la forma en que está ...

Puede también echa un vistazo a una buen tutorial sobre el mismo en http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

Fuente

2011-06-29 13:18:01 testndtv

Gracias por su respuesta. Esto debería ser fácil si utilicé diseños porcentuales o basados en em en primer lugar ... – Phil

Sí correcto ... se mostraría correctamente en ambas orientaciones ... Tx ... – testndtv

Usted puede ser capaz de utilizar CSS específica orientación de esta manera:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

En ese caso, es probable que tenga que ajustar la configuración de las ventanas gráficas a la anchura de equipos máx y cuidar de la anchura real del contenido usando CSS. Por ejemplo, envuelva todo en un div con el ancho apropiado para cada orientación, 1024px o 768px (menos la barra de estado y el navegador Chrome es necesario).

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />

Fuente

2011-06-29 12:56:50

Gracias, tanto hmthr's como tu respuesta son muy similares, me gustaría poder marcar ambas como respuestas, pero la respuesta de hmthr es la que terminé usando. – Phil

Ampliar el ancho de la vista de Mobile Safari cuando el iPad está en orientación vertical? -

Respuesta

Cuestiones relacionadas