iOS7 bỏ qua truy vấn phương tiện truyền thông võng mạc css - background-size

Question

Apple vừa phát hành hệ điều hành iOS7 mới nhưng nó gây ra vấn đề với truy vấn phương tiện biểu tượng võng mạc của tôi. Có vẻ như thuộc tính kích thước nền đang bị bỏ qua. Một hình ảnh mẫu ở đây: http://imgur.com/R3OgFgN

Thay thế hình ảnh hoạt động hoàn hảo trên iPhone 4, 4s, 5 chạy iOS6 trở xuống (bất kỳ trình duyệt nào). Các trình duyệt iOS7 xuất hiện để lấy hình ảnh có độ phân giải cao nhưng bỏ qua thuộc tính kích thước nền:

@media (-webkit-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    background-size: 100%; 
} 

Nó làm gì;

• Thay thế ảnh gốc với hình ảnh @ 2x

gì nó không làm;

• Phù hợp với hình nền cho kích thước phần tử div.

Đã thử nghiệm trên iOS7 Safari & Chrome.

Có ai gặp vấn đề này không và liệu bạn đã xoay xở để khắc phục sự cố đó chưa?

Answer 1

Tôi đã giải quyết! Hóa ra, iOS7 đặt lại thuộc tính kích thước nền khi chạy truy vấn phương tiện. Bí quyết là chỉ định kích thước nền với kích thước pixel chính xác hoặc với giá trị 100% như vậy;

@media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 2dppx){ 
     .logo{ 
      background: url(../img/2x/logo@2x.png) no-repeat 0 0 !important; 
      background-size: 100% !important; 
      width: 30px; 
      height: 40px; 
     } 

N.b - Tôi cũng thấy rằng trong đó có quan trọng thẻ đảm bảo tất cả các thiết bị retina đọc truy vấn đúng cách, trong đó có Samsung S3 & S4!. Thưởng thức.

Answer 2

Vì ví dụ là hình ảnh. Tôi không thể kiểm tra mã.

Bạn có thể thử các tùy chọn sau đây:

1. Nếu chiều rộng và chiều cao của div là cố định. Bạn có thể đặt chiều rộng cố định và chiều cao cho hình ảnh. thông thường, màn hình hiển thị võng mạc cần "tỷ lệ pixel-thiết bị-pixel" cho màn hình có độ phân giải cao.

ví dụ:

@media (-webkit-min-device-pixel-ratio: 2) 
     and (min-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 
    width: 200px; 
    height: 100px; 
} 

hoặc nếu div không cố định.

@media (-webkit-min-device-pixel-ratio: 2) 
     and (min-device-pixel-ratio: 2){ 
.b .logo{ 
    background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 
    background-size: contain; 
} 

Hãy thử nếu điều này có thể khắc phục được sự cố của bạn.

Chúc mừng!

Answer 3

Đây không phải là hành vi lỗi. Đây là lỗi của bạn. Bạn đặt tất cả các thuộc tính nền ở đây:

background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important; 

để duyệt đối xử này như

background-image:url(../img/2x/m-yellloh-logo@2x.png) !important 
background-position:0 0 !important 
background-repeat:no-repeat !important 
background-size:auto auto !important 
and so on 

do đó dòng cuối cùng của bạn background-size: 100%; được ghi đè bởi background-size:auto auto !important;