css - como - ¿Una forma de corregir la escala de fondo en Safari de iPad?
como cambiar el color de safari en mac (6)
Tengo un sitio web que usa una gran imagen de fondo (2000x1500) en un contenedor div (100% x 100%).
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 etiqueta img en un div con un ancho del 100% y una altura del 100% y una configuración de desbordamiento "oculta". 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?
Agregar esto funcionó para mí cuando tenía una imagen de fondo en el lienzo de fondo ...
body{ -webkit-background-size: 2000px 1400px;}
Obviamente, uno tiene que reemplazar las dimensiones con el tamaño correcto para la imagen.
Definitivamente debe crear una hoja de estilos separada para el iPad. Puede usar lo 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 tratarlo.
Mi consejo sería crear una hoja de estilo separada (archivo css) para la versión iPad de su sitio. No importa lo que haga, simplemente debe crearlo 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 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.
Déjame saber como va.
Por cierto, debería leer este artículo también: http://www.inspiredm.com/2010/02/09/ipad-design/
Parece que este problema solo ocurre en el iPad cuando tienes una imagen de fondo adjunta a la etiqueta <body>. 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 use la etiqueta <body> para las imágenes.
Puede ver la diferencia en estos dos sitios, el primero usa la etiqueta <body> para el posicionamiento (debido al posicionamiento fijo en la imagen de fondo) y el segundo usa 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.
Puede usar la solución de @UXdesigner para crear una hoja de estilos separada para iPad. Pero puede usar 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 dispositivos más pequeños como teléfonos que puedes usar:
@media only screen and (max-device-width: 480px){
.yourClassname{
max-width: 100px;
}
}
Tenga en cuenta que estas sugerencias solo funcionan en CSS3 (todos los dispositivos más recientes aceptan esto)
Tengo una imagen de fondo de 5400x556 (desplazamiento) 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.
Buena llamada en las hojas de estilo separadas sin embargo.
buena suerte
Owen
Yo suelo:
body {min-width:2000px; min-height:1500px }