<img srcset... attribute cho phép hiển thị các hình ảnh khác nhau cho người dùng phụ thuộc vào độ phân giải màn hình.Trình duyệt nào hỗ trợ thuộc tính `<img srcset...>`?
Trình duyệt nào hiện tại (tháng 1 năm 2013) hỗ trợ thuộc tính này?
Vì đây là thuộc tính hữu ích cho người dùng duyệt trên điện thoại thông minh, ngoài ra, trình duyệt di động nào hỗ trợ?
Cập nhật Feb 2014
Có những khía cạnh khác nhau để srcset, trong đó có mật độ pixel và chiều rộng khung nhìn. Tại thời điểm viết bài:
Tôi đã đặt một số thử nghiệm các tệp và kết quả trên số Github repo mà tôi sẽ cố giữ lại hiện tại.
WebKit [đã thêm hỗ trợ] (https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/) vào ngày 12 tháng 8 năm 2013. Điều này có nghĩa là nó có thể sẽ hỗ trợ Safari phiên bản 7 (từ Mavericks), nhưng tôi không chắc chắn về Mobile Safari. – Nick
Tôi đã cập nhật repo Github của mình. Nó chưa có trong Safari 7. Ngoài ra, tôi nhận thấy [Surfin 'Safari] (https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image -attribute /) chỉ đề cập đến mật độ pixel, không phải chiều rộng khung nhìn. – Mike
FYI… một bài viết khác, [WebKit đã triển khai srcset, Và đó là một điều tốt] (http://www.smashingmagazine.com/2013/08/webkit-implements-srcset-and-why-its-a-good-thing /) bởi chủ tịch của [Nhóm cộng đồng hình ảnh đáp ứng] của W3C (http://responsiveimages.org). –
Điều thú vị là, wikipedia dường như được sử dụng srcset với các thuộc tính như thế này:
srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/300px-Izokefalizm.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/400px-Izokefalizm.jpg 2x"
tôi đoán họ đang sử dụng một polyfill để đạt được điều này, nhưng chắc chắn nó là hiển thị hình ảnh lớn hơn một cách chính xác. Có thể có giá trị poking xung quanh.
Vâng, đó là một hình thức đa ngôn ngữ, xem http://www.mediawiki.org/wiki/Manual:$wgResponsiveImages và http://www.mediawiki.org/wiki/HiDPI_display_support – leo
những gì bạn điền: http://elroyjetson.org/dev-notes/mobile/implement-responsive-images-with-a-polyfill –
Webkit hiện đang hỗ trợ các thuộc tính srcset: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/
Và (tính đến hôm nay) Chrome: http://blog.chromium.org/2014/02/chrome- 34-responsive-images-and_9316.html – fboes
Đối với thiết bị iOS - Safari cho iOS8 bây giờ hỗ trợ srcset - nhưng sẽ không được sẵn sàng cho đến khi mùa thu 2014.
http://friendfeed.com/christianoliff/c7c40ae2/safari-for-ios8-now-supports-img-srcset
nhưng chỉ có độ phân giải '1x' và' 2x' chứ không phải ký hiệu 'w' –
Có tìm kiếm sự hỗ trợ hiện tại tại CanIUse.com. Tính đến thời điểm này, tháng 10 năm 2015, nếu bạn không quan tâm đến IE nhiều, bạn có thể sử dụng nó một cách an toàn trên tất cả các trình duyệt, những thứ tốt!
['caniuse.com'] (http://caniuse.com/#feat=srcset) là một nguồn tuyệt vời cho * khả năng tương thích trình duyệt *. – cregox
Vâng đó là một nguồn tài nguyên tuyệt vời nhưng hình ảnh thực tế có thể khác nhau. – Rantiev