iPad & iPhone: hình nền trang đầy đủ hiển thị liên kết cắt/chụp màn hình bao gồm

Question

Hình nền trang đầy đủ hiển thị bị cắt trên iPhone và iPad (safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.com

Thật tuyệt vời nếu bạn có thể cho tôi một số lời khuyên về điều này. Cảm ơn vì sự giúp đỡ của bạn trước đó!

Ảnh chụp màn hình dưới: http://www.soojincreative.com/photo.PNG

mã sử dụng -> hình nền là trong #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

thử thêm:

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

Answer 2

vấn đề của bạn là chia tỷ lệ hình nền. Khi hiển thị bất kỳ hình ảnh nào, Safari trên iPad sẽ cố gắng mở rộng nó để vừa với thiết bị tốt nhất. Nếu kích thước thực tế của hình ảnh lớn hơn màn hình của iPad, nó sẽ mở rộng. Trong trường hợp này, hình nền của bạn là 1280x3900 — lớn hơn nhiều so với độ phân giải của iPad — vì vậy Safari đang cố gắng thay đổi kích thước hình ảnh để vừa với chiều dọc.

This question ở nơi khác trên Stack Overflow có thể giúp bạn giải quyết vấn đề này. Tôi đồng ý với đề xuất của người trả lời về việc thay đổi kích thước hình nền và phân phối nó bằng cách sử dụng truy vấn phương tiện chỉ cho iPad và để riêng nó trên trình duyệt trên máy tính để bàn.

Để thực hiện một truy vấn phương tiện truyền thông, thêm dòng sau vào dưới cùng của file CSS của bạn:

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

Answer 3

Vâng, đối với tôi chỉ đơn giản là thay thế

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

bởi

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

làm lừa. Bạn có thể muốn thử nó.

Nếu nó không làm việc cho bạn, sau đó Apple Safari Dev Documents có thể hữu ích cho bạn: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 4

Bí quyết là để cung cấp cho min-width cho cơ thể

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

Answer 5

Mã tại đây

Sửa hình nền cho ipad

Chỉ cần nhập si zes theo hình ảnh của bạn dimentions

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