Tôi sử dụng bản hack Javascript này để tải hình ảnh được chia tỷ lệ khi chạy trên thiết bị võng mạc. Nó sẽ thay đổi thuộc tính src và width trên tất cả các hình ảnh để sử dụng hình ảnh được chia tỷ lệ tương ứng. Lưu ý rằng tôi đã chỉ thử nghiệm này với hình ảnh địa phương.
Đặt display: none và sau đó đặt lại trên đường nối tải hình ảnh để sửa một số nhấp nháy. Cũng lưu ý rằng mã này có thể không tương thích với các trình duyệt khác so với WebKit.
document.addEventListener("DOMContentLoaded", function() {
var scale = window.devicePixelRatio;
// might want this to be scale != 2
if (scale == undefined || scale == 1) {
return;
}
var re = /^(.*)(\..*)$/;
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var img = images[i];
var groups = re.exec(img.src);
if (groups == null) {
continue;
}
img.style.setProperty("display", "none");
img.addEventListener("load", function(event) {
event.target.width /= scale;
event.target.style.setProperty("display", "");
});
img.src = groups[1] + "@" + scale + "x" + groups[2];
}
});
Mẹo là thêm tệp này vào tệp, ví dụ: scaledimages.js và sau đó sử dụng
<script type="text/javascript" src="scaledimages.js"></script>
Hãy chắc chắn rằng js-file được liệt kê trong "Copy Bundle Tài" và không có trong "Biên soạn Nguồn" trong mục tiêu của bạn "Xây dựng giai đoạn". Các đường nối Xcode mặc định phát hiện các tệp Javascript như một cái gì đó mà nó thích biên dịch. Cũng lưu ý rằng tập lệnh hiện tại có thể vi phạm nếu devicePixelRatio xảy ra từ 3 trở lên trong tương lai, đề phòng có thể là thay đổi (scale == undefined || scale == 1) thành scale != 2 chỉ tải @2x bây giờ.
Cập nhật: Ngoài ra còn có một jQuery-Retina-Display-Plugin rằng làm điều gì đó tương tự nhưng đòi hỏi bạn phải thiết lập các width thuộc tính và vỉa cũng sử dụng một yêu cầu HEAD để xem hình ảnh tồn tại, không chắc chắn làm thế nào mà sẽ làm việc cho các tập tin địa phương.
Nguồn
2011-10-12 14:13:01
Vì không có câu trả lời nào tốt hơn, tôi chấp nhận giải pháp này như một giải pháp khả thi. Lý tưởng nhất là UIWebView nên xử lý chính nó cho hình ảnh cục bộ, nhưng kiểm tra quy mô màn hình thiết bị và điều chỉnh HTML cho phù hợp. –
Trên iPad ở chế độ 2x, tỷ lệ cũng là 2.0. – occulus
Chắc chắn, nhưng điều đó liên quan đến các ứng dụng iPhone. Ứng dụng iPad không chạy ở chế độ thu nhỏ. Vì vậy, nếu bạn xử lý trường hợp này đúng cách trên ứng dụng iPhone của bạn, không phải là một vấn đề. :) – jer