2012-01-18 19 views
5

La imagen de fondo de la página completa muestra el corte en iPhone y iPad (safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.comiPad & iPhone: la imagen de fondo de la página completa muestra el enlace de corte/captura de pantalla incluido

Sería genial si pudiera darme algunos consejos sobre esto. ¡Gracias por tu ayuda con anticipación!

pantalla es el siguiente: http://www.soojincreative.com/photo.PNG

el código utilizado -> la imagen de fondo está en #wrapper:

enter code here 
body { 
font: normal normal 16px/22px "Kingfisher Regular", Georgia, "Times New Roman", serif; 
font-size-adjust: 0.47; 
color: #000; 
background-color: #e3e8ee; 
margin-top: -13px; 
} 

#wrapper { 
padding-top:none; 
background: url('images/background2.jpg') no-repeat center; 
width: 1280px; 
margin: 0 auto; 
overflow:hidden; 
} 
+0

No es una respuesta, pero su página tampoco maneja bien las pantallas del escritorio. La imagen de fondo no se amplía para manejar una ventana muy grande, y al hacer que la ventana más pequeña corte el contenido. Además, está intentando incluir una hoja de estilo de un servidor local (127.0.0.1:8080) (el error aparece en la consola de error de Safari). –

Respuesta

1

intento de añadir:

#wrapper { ... 
    background-size: cover; 
... } 
2

Su tema está escalando la imagen de fondo. Al renderizar cualquier imagen, Safari en iPad intentará escalar para que se ajuste mejor al dispositivo. Si el tamaño real de la imagen es más grande que la pantalla del iPad, se escalará. En este caso, su imagen de fondo es 1280x3900 — mucho más grande que la resolución — del iPad, por lo que Safari está intentando redimensionarla para que se ajuste verticalmente.

This question en otro lugar en Stack Overflow puede ayudarlo a resolver este problema. Estoy de acuerdo con la sugerencia del respondedor de cambiar el tamaño de la imagen de fondo y servirla utilizando una consulta de medios solo para iPads y dejándolo solo en los navegadores de escritorio.

para implementar una consulta de medios, añada lo siguiente a la parte inferior de su archivo CSS:

@media screen and (max-device-width: 1024px) { 
    #wrapper { 
     background-image: url('/path/to/smaller/background/image.png'); 
    } 
} 
6

Bueno, para mí simplemente reemplazando

<meta name="viewport" content="width=device-width"> 

por

<meta name="viewport" content="width=1024"> 

hizo el truco. Es posible que desee probarlo.

Si esto no funciona para usted, entonces el Safari de Apple Dev Docs pueden ser útiles para usted: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

+0

Esto realmente funciona bien, no es que tener fondos como este sea grande debido a la velocidad de carga, pero configuré el ancho del ancho de mi imagen de fondo y se corrigió el corte. – typemismatch

5

El truco es dar min-width al cuerpo

body{ width:100%;min-width: 1280px; } 
+0

¡Brillante comentario Bobby! – Kwex

+0

Incluso agregue 'overflow-x: hidden;' para estar realmente seguro de que no supera este ancho –

0

código aquí

Es la fijación de imágenes de fondo para ipad

Simplemente escriba resume zes de acuerdo con las dimensiones de su imagen

/* Page background-image landscape for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image portrait for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image landscape for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    } 
} 
/* Page background-image portrait for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 5024px 2024px !important; 
    background-size: 5024px 2024px !important; 
    } 
} 
Cuestiones relacionadas