Hình ảnh bị mờ trong di động trên iPhone 4 safari

Question

Tôi đang tạo một ứng dụng web dành cho thiết bị di động và đang gặp sự cố với hình ảnh của mình. Chúng trông tuyệt vời trên máy tính để bàn của tôi nhưng tất cả đều bị mờ trong iPhone. Tôi đoán nó là nguyên nhân 'của màn hình võng mạc và safari di động cần phải tăng gấp đôi kích thước của các trang web.

Có cách giải quyết nào để hình ảnh hiển thị sắc nét trên iPhone 4 không?

Answer 1

Tôi đã tìm thấy câu trả lời. Tôi thấy bài viết này: http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries Những chủ trương sử dụng các truy vấn phương tiện truyền thông như thế này:

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    #map-page .ui-icon { 
     background-image: url("/images/retina/4_ikon_hitta.png"); 
    } 
} 

này hoạt động cho bây giờ, nhưng tôi không phải là một giải pháp tối ưu. Trong các ý kiến ​​của một bài báo khác, nơi nói về việc không sử dụng các điểm ảnh như một phép đo ở tất cả, điều này có ý nghĩa hoàn hảo. IPhone4 chỉ là thiết bị đầu tiên trong số nhiều thiết bị dpi cao cấp. Vì vậy, một pixel sẽ có nhiều kích thước hơn trong tương lai.

Mobile Safari có từ ios 2.1 hỗ trợ cho SVG do đó tùy thuộc vào thiết bị nào bạn phải hỗ trợ SVG (có thể với một số dự phòng) là điều cần cân nhắc kỹ.

Đối với dự án tiếp theo của tôi (và của bạn nữa!), Tôi sẽ đào sâu vào ems, điểm,% và SVG.