Tôi muốn tải hình ảnh có độ phân giải cao hơn cho người dùng iPhone 4, nhưng cách duy nhất tôi biết phát hiện người dùng là do tác nhân người dùng. Nhưng tôi theo ấn tượng rằng người sử dụng-đại lý của MobileSafari trên bất kỳ điện thoại iOS4 là như nhau trên bảng.Có cách nào để phân biệt khách truy cập iPhone 3G/S với khách truy cập iPhone 4 không?
Tôi có thể làm gì để phát hiện iPhone 4?
Bạn có thể sử dụng truy vấn phương tiện CSS3 để phát hiện tỷ lệ thiết bị-pixel của iPhone 4 (số pixel CSS bằng pixel hiển thị vật lý). Sau đó, bạn có thể sử dụng CSS để tải hình ảnh có độ phân giải cao hơn thay vì hình ảnh bình thường.
Trong <head> thẻ trên trang web của bạn, thêm này để tham khảo một stylesheet bên ngoài mà sẽ chỉ được nạp cho iPhone 4 sử dụng:
<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thuộc tính media quy định cụ thể để chỉ sử dụng kiểu này cho các thiết bị với một tỷ lệ tối thiểu thiết bị-pixel là 2 (ví dụ: iPhone 4). Sau đó, bạn có thể thêm các quy tắc CSS trong high_res.css để thay thế hình ảnh độ phân giải thấp với các phiên bản độ phân giải cao:
#highres-if-possible {
background-image: url(high_res_pic.png);
}
Lưu ý rằng bạn sẽ phải chỉ rõ hình ảnh trong HTML bằng cách sử dụng thuộc tính CSS background-image thay vì src thuộc tính.
Ví dụ: cho một hình ảnh 60x50, thay thế:
<img id="highres-if-possible" src="low_res_pic.png">
với
<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">
Không đảm bảo rằng việc xác định hình ảnh như thế này sẽ làm việc trong tất cả các trình duyệt (Internet Explorer), nhưng nó sẽ làm việc tốt trong các trình duyệt tuân thủ tiêu chuẩn (và trên iPhone).
Để biết thêm thông trên các truy vấn phương tiện truyền thông CSS3 và sử dụng chúng để phát hiện iPhone 4, xem: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
CẬP NHẬT: Tôi đã xem qua this post và this post rằng có thể có một cách tốt hơn để xử lý xác định hình ảnh sử dụng CSS (sử dụng <img style="background-image:url(http://.. .)"> thay vì <img src="http://...">) so với những gì tôi có ở trên.
bằng cách sử dụng chuỗi HTTP_USER_AGENT bạn có thể tìm ra nó là cái gì. Tôi chưa bao giờ thử nó nhưng nếu bạn nên bắt đầu. Ngoài ra ive nhìn thấy một vài thư viện php sẽ làm điều đó cho bạn. hi vọng điêu nay co ich. cổ vũ.
có thể trùng lặp: http://stackoverflow.com/questions/3262432/ nơi OP tuyên bố rằng có thể phát hiện kích thước màn hình từ js. – mvds
http://stackoverflow.com/questions/3354246/javascript-iphone-selection/3354478#3354478 Có thể hỗ trợ. –