iPad i iPhone: pełny obraz tła przedstawia odcięty/zrzutu ekranu link dołączony

Question

Pełny obraz tła strony jest obcięty na iPhone'ach i iPadach (Safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.com

Byłoby wspaniale, gdybyś mógł mi doradzić w tej sprawie. Dzięki za pomoc z góry!

ekranu znajduje się poniżej: http://www.soojincreative.com/photo.PNG

kod używany -> obraz tła jest w #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

try dodając:

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

Answer 2

swój problem jest skalowanie obrazu tła. Podczas renderowania dowolnego obrazu Safari na iPadzie spróbuje przeskalować go, aby najlepiej pasował do urządzenia. Jeśli rzeczywisty rozmiar obrazu jest większy niż ekran iPada, zostanie skalowany. W tym przypadku obraz tła jest o 1280 x 3900 — znacznie większy niż rozdzielczość iPada —, więc Safari próbuje zmienić jego rozmiar, aby zmieścił się w pionie.

This question w innym miejscu w Stack Overflow może pomóc rozwiązać ten problem. Zgadzam się z sugestią respondenta o zmianie rozmiaru obrazu tła i wyświetlaniu go przy użyciu zapytania o media tylko dla iPadów i pozostawienie go samego w przeglądarkach komputerowych.

celu realizacji zapytania mediów, dodać następujące dole pliku CSS:

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

Answer 3

Cóż, dla mnie po prostu zastępując

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

przez

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

zrobił sztuczka. Możesz spróbować.

Jeśli to nie zadziała, to Apple Safari Dev Dokumenty mogą być pomocne dla Ciebie: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 4

Sztuką jest dać min-width do ciała

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

Answer 5

kod tutaj

To mocowania obrazów tła dla ipad

Wystarczy wprowadzić Si zes zgodnie z twoimi wyobrażeniami o obrazach

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