iPad & iPhone: la imagen de fondo de la página completa muestra el enlace de corte/captura de pantalla incluido

Question

La imagen de fondo de la página completa muestra el corte en iPhone y iPad (safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.com

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; 
} 

Answer 1

intento de añadir:

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

Answer 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'); 
    } 
} 

Answer 3

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

Answer 4

El truco es dar min-width al cuerpo

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

Answer 5

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; 
    } 
}