PhoneGap, jQuery Mobile và Retina Display

Question

Tôi đang làm việc trên một ứng dụng PhoneGap bằng jQuery Mobile. Hiện tại tôi chỉ đang thử nghiệm trên iPhone và iPhone mô phỏng võng mạc.

Khi tôi mở ứng dụng ở chế độ Retina, mật độ của ứng dụng là chính xác nhưng trang chỉ bằng một nửa kích thước màn hình trên cả hai chiều.

Đoán của riêng tôi là CSS của jQuery Mobile không mở rộng chiều rộng và chiều cao, nhưng tôi không thể tìm thấy bất cứ điều gì về điều này.

HTML của tôi có này:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

Và sau đó tôi thực thi Javascript này:

if ($.mobile.media("screen and (min-width: 320px)")) { 
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) { 
     $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); 
    } 
} 

tôi thiếu gì?

Answer 1

Tôi nghĩ bạn đoán đúng.

Xem tệp JQM.css.

Nó chỉ bao gồm truy vấn phương tiện cho biểu tượng hi-res/lo-res. Mọi thứ khác là "như là" trên võng mạc và các thiết bị không võng mạc, vì vậy JQM chỉ hỗ trợ võng mạc về kích thước biểu tượng.

Bằng cách chỉ định initial-scale=.5, maximum-scale=.5, minimum-scale=.5 bạn đang khóa mọi thứ ở mức 50%. Vì vậy, có một nửa trang không thể mở rộng của bạn.

Bạn càng thích hợp cho thiết bị võng mạc ("cao cấp"), bạn càng gặp nhiều rắc rối với trình duyệt chuẩn (đặc biệt là "kết thúc thấp", như IE7). Kiểm tra vị trí biểu tượng JQM trong IE7 chẳng hạn - nếu bạn không bao gồm tập lệnh như respond.js để hỗ trợ truy vấn phương tiện, biểu tượng sẽ bị tắt.

Tôi nghĩ hiện tại không có đủ thiết bị võng mạc để đảm bảo JQM cung cấp giải pháp võng mạc và giải pháp không phải võng mạc giữa các trình duyệt.

Tôi đã tìm thấy một số thông tin tốt here. Tôi cũng đã làm một CSS chỉ iOS tab-bar, hoạt động xuống IE7.

Kiểm tra CSS cần thiết trong plugin của tôi để chỉ làm cho biểu tượng và nền phông nền trông đẹp trên tất cả các trình duyệt và số lượng CSS bổ sung cần thiết để điều chỉnh cho IE7 + 8. Tệp hình ảnh Retina/non-retina JQM.css sẽ rất hay nhưng khó tải xuống :-)

Answer 2

Trong trường hợp của bạn, bạn phải chỉ nhắm mục tiêu hình ảnh chứ không phải toàn bộ chế độ xem. hình ảnh phải giảm một nửa so với màn hình bình thường của bạn.