iPad e iPhone: l'immagine di sfondo della pagina intera mostra il collegamento cut-off/screen shot incluso

Question

L'immagine di sfondo della pagina intera è tagliata su iPhone e iPad (Safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.com

Sarebbe bello se potessi darmi qualche consiglio su questo. Grazie per il vostro aiuto in anticipo!

Screenshot è qui sotto: http://www.soojincreative.com/photo.PNG

il codice utilizzato -> l'immagine di sfondo è in #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

prova ad aggiungere:

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

Answer 2

tuo problema è il ridimensionamento dell'immagine di sfondo. Durante il rendering di qualsiasi immagine, Safari su iPad proverà a ridimensionarlo per adattarlo al meglio sul dispositivo. Se la dimensione effettiva dell'immagine è maggiore di quella del display dell'iPad, verrà ridimensionata. In questo caso, l'immagine di sfondo è 1280x3900 — molto più grande della risoluzione dell'iPad —, quindi Safari sta tentando di ridimensionarlo per adattarlo verticalmente.

This question altrove su Stack Overflow può aiutare a risolvere questo problema. Sono d'accordo con il suggerimento del rispondente di ridimensionare l'immagine di sfondo e servirla utilizzando una query multimediale solo su iPad e lasciandola da sola sui browser desktop.

Per implementare una media query, aggiungere il seguente alla fine del file CSS:

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

Answer 3

Beh, per me semplicemente sostituendo

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

da

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

fatto il trucco. Potresti volerlo provare.

Se non funziona per voi, allora l'Apple Safari Dev Docs può essere utile a voi: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 4

Il trucco è quello di dare min-width per il corpo

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

Answer 5

Codice qui

E fissare le immagini di sfondo per ipad

basta inserire SI zes in base alle dimensioni dell'immagine

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