¿Una forma de corregir la escala de fondo en Safari de iPad?

Tengo un sitio web con una gran imagen de fondo (2000x1500) en un contenedor div (100% x 100%).¿Una forma de corregir la escala de fondo en Safari de iPad?

Cuando abro ese sitio en Safari en un iPad, se reduce (~ 40%) en una proporción diferente que el contenido (~ 80%).

Moví el fondo a una img-tag en un div con un ancho del 100% y una altura del 100% y un valor de desbordamiento "oculto". Exactamente lo mismo pasa.

¿Hay alguna configuración de CSS que pueda ayudar a Safari a reducir las imágenes de fondo en la misma proporción que el contenido?

Fuente

2010-06-03 favo

Definitivamente debe crear una hoja de estilos separada para el iPad. Se puede utilizar el siguiente para hacerlo:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

En este enlace, encontrará información sobre la orientación de su sitio web en el IPAD y cómo tratar con él.

Mi consejo sería crear una hoja de estilo separada (archivo css) para la versión iPad de su sitio, sin importar lo que haga, solo debe crearla y agregar una etiqueta de enlace como la que se muestra arriba.

Si tiene un fondo de una imagen que es 2000x1500px para la versión de iPad, puede reducirla para que quepa en el iPad, si eso es lo único que tiene un problema. Yo diría que debes reducir el tamaño de la imagen a 1024 px y declararlo en la hoja de estilos separada para el iPad, y verás el resultado final.

Dejarme saber cómo va.

BTW usted debe leer este artículo así: http://www.inspiredm.com/2010/02/09/ipad-design/

Fuente

2010-06-03 14:25:54 UXdesigner

esto funcionó perfecto, gracias! Empecé a usar un segundo CSS con un tamaño de píxel fijo para el contenedor de fondo, también gracias por el artículo, ¡+1 también! – favo

De nada. Me di cuenta de que hice referencia a un enlace en mi respuesta, pero no publiqué el enlace: Acerca de la orientación de diseño del iPad: http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes – UXdesigner

Simplemente una adición a la respuesta dada por @UXdesigner - utilice las etiquetas '' para no romper el sitio en IE. – vikmalhotra

Parece que este problema sólo se produce en el IPAD cuando se tiene una imagen de fondo que se adjunta al cuerpo < > etiqueta. Si coloca la imagen de fondo en un div que contiene, el problema puede resolverse: esta es una gran solución si no necesita tener su imagen de fondo "fija", ya que las técnicas para hacer que el fondo funcione de manera fija en IE mandato que utilice <cuerpo> etiqueta para las imágenes.

Se puede ver la diferencia en estos dos sitios, el primero utiliza la <cuerpo> etiqueta para el posicionamiento (debido a la colocación fija la imagen de fondo) y la segunda utiliza un div que contiene:

http://www.mricsi.com http://www.collinshirsch.com

Espero que ayude!

editar - esto no es del todo exacto - parece que este es el caso solo algunas veces, y la razón detrás de por qué no está claro.

Fuente

2010-09-15 17:48:27

Tengo un 5400x556 como una imagen de fondo (desplazable) en un div. Como .jpg se reduce drásticamente, como .png está bien. El único problema ahora es que el .png es de 5 megas. Grr.

Bien llamada en las hojas de estilos separadas sin embargo.

buena suerte

Owen

Fuente

2010-09-28 06:34:25

La adición de esta trabajado para mí cuando tuve una imagen de fondo en el fondo del lienzo ...

body{ -webkit-background-size: 2000px 1400px;}

Obviamente uno tiene que sustituir a las dimensiones con el correcto tamaño para la imagen.

Fuente

2011-05-06 00:16:44

Confirmo que esto funciona bien. Gracias. – madr

Lo necesitaba solo como una solución rápida, funciona como un encanto. – EinLama

IOS también escala 2mp + imágenes, tenga cuidado http://stackoverflow.com/questions/2860387/ipad-iphone-scale-background-images – vearutop

que utilizo:

body {min-width:2000px; min-height:1500px }

Fuente

2011-09-24 13:49:38

Usted puede utilizar la solución de @UXdesigner para crear una hoja de estilo Seperated para el iPad. Sin embargo, se puede utilizar una sola declaración en su hoja de estilo actual:

@media only screen and (max-device-width: 1024px){ 
    .yourClassname{ 
    max-width: 500px; 
    } 
}

y por supuesto para los dispositivos más pequeños, como los teléfonos que puede utilizar:

@media only screen and (max-device-width: 480px){ 
    .yourClassname{ 
    max-width: 100px; 
    } 
}

Tenga en cuenta que estas sugerencias sólo funcionan en CSS3 (los últimos dispositivos todos aceptan esto)

Fuente

2012-08-03 13:11:20 arnoudhgz

¿Una forma de corregir la escala de fondo en Safari de iPad?

Respuesta

Cuestiones relacionadas