Tại sao kích thước nền CSS: bìa không hoạt động ở chế độ dọc trên iOS?

Question

Tôi đang cố gắng thiết lập manualy splash-image trên các thiết bị. Tôi đang làm như vậy bằng cách kiểm tra orientation (thiết bị cảm ứng) hoặc screen width vs. screen height (không chạm vào) và đặt url cho phù hợp.

Sau đó, tôi thêm quy tắc CSS này qua javascript:

document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0) 

Với x là hình ảnh được nạp tùy thuộc vào định hướng và kích thước màn hình.

Sự cố của tôi hoạt động tốt ở chế độ landscape, nhưng trên iPad ở chế độ portrait, hình ảnh chính xác được tải (khác nhau tùy theo chân dung/phong cảnh), NHƯNG không mở rộng đến kích thước toàn màn hình.

Câu hỏi:
Tôi có thể không sử dụng CSS background-size trên iOS trong bức chân dung chế độ?

Cảm ơn bạn đã trợ giúp!

EDIT:
Vừa thử trên điện thoại thông minh Android của tôi. Hoạt động tốt ở đó. Làm cho không có ý nghĩa, tại sao nó không hoạt động trên iPad.

Answer 1

Trong khi kiểm tra định hướng xin vui lòng lưu ý những điểm từ tài liệu táo -

Cung cấp Launch Images:

iPhone chỉ ứng dụng chỉ có thể có một hình ảnh khởi động. Nó phải ở định dạng PNG và đo 320 x 480 pixel. Đặt tên cho ảnh khởi chạy của bạn tệp Default.png.

Ứng dụng chỉ dành cho iPad: Tạo hình ảnh khởi chạy cho từng hướng được hỗ trợ ở định dạng PNG. Mỗi ảnh khởi chạy phải có kích thước 1024 x 748 pixel (đối với khổ ngang) hoặc 768 x 1004 pixel (đối với ảnh dọc).

Ứng dụng phổ biến: Bao gồm hình ảnh khởi chạy cho cả iPhone và iPad.

Cập nhật Info.plist Cài đặt Xác định giá trị của bạn cho UISupportedInterfaceOrientations và UIInterfaceOrientation

và

Không phải tất cả các trình duyệt nhận từ khóa vỏ bọc cho nền kích thước, và kết quả là , đơn giản là bỏ qua nó.

Vì vậy, chúng tôi có thể khắc phục giới hạn đó bằng cách đặt kích thước nền thành 100% chiều rộng hoặc chiều cao, tùy thuộc vào hướng. Chúng tôi có thể nhắm mục tiêu hướng hiện tại (cũng như thiết bị iOS, sử dụng chiều rộng thiết bị).Với hai điểm này tôi nghĩ bạn có thể sử dụng CSS background-size:cover trên iOS trong bức chân dung-mode

Dưới đây là một số tài nguyên khác mà tôi cũng đã xem qua trong khi tìm kiếm một giải pháp: Flexible scalable background images, full scalable background images, perfect scalable background images, và this thảo luận.

Answer 2

Ok. Sau đây là cách nó hoạt động (Nhờ @iMeMyself):

body { 
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    } 

Vì vậy, đầu tiên thiết lập nó để 100%, sau đó đến cover. Bằng cách này, tất cả trình duyệt không thể cover nhận giá trị 100%, trong khi các trình duyệt có thể nhận được 100% ghi đè bằng bìa.

Answer 3

Mã đây

Nó sửa chữa hình ảnh nền cho ipad

Chỉ cần nhập kích thước theo Kích thước hình ảnh của bạn

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

Answer 4

Theo như tôi biết, phương pháp này hoạt động trên tất cả Thiết bị iOS. Tùy thuộc vào các yếu tố trang khác của bạn (tiêu đề vv), bạn có thể cần phải điều chỉnh z-index cho &: trước phần tử psuedo.

html { 
    height:100% !important; 
} 

body { 
    height:100%; 
    min-height:100%; 
    overflow-x:hidden; 
    overflow-y:auto; 
    // use your own class here // 
    &.body-class { 
     // @screen-xs-max is a Bootstrap3 variable name // 
     @media screen and (max-width:@screen-xs-max) { 
      min-height:100vh; 
      position:relative; 
      &:before { 
       position:fixed; 
       top:0; 
       left:0; 
       right:0; 
       bottom:0; 
       display:block; 
       content:""; 
       z-index:-1; 
       background-image:url(background-image.jpg); 
       background-position:center; 
       background-size:cover; 
       // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes // 
       -webkit-background-size:cover; 
      } 
     } 
    } 
} 

Answer 5

Theo Designing Websites for iPhone X iOS 11 giới thiệu một phần mở rộng mới cho viewport thẻ meta hiện gọi là viewport-fit, cung cấp kiểm soát đối với hành vi insetting. Cài đặt mặc định là auto, cài đặt này sẽ không bao phủ toàn bộ màn hình.

Để vô hiệu hóa các hành vi hình chữ nhật mặc định và gây ra trang để đặt ra với kích thước đầy đủ của màn hình, bạn có thể đặt viewport-fit-cover như ở đây:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 

Nếu không thiết lập này các kỹ thuật hiện có sử dụng cho màn hình giật gân và hình ảnh anh hùng kích thước đầy đủ có thể không hiển thị như mong đợi trên iPhone X hoặc các thiết bị iOS phù hợp khác.