Các vấn đề với việc điều chỉnh tỷ lệ pixel thiết bị cho Android trong Phonegap

Question

Tôi đã cố gắng truy vấn phương tiện để hoạt động bình thường trên các thiết bị có tỷ lệ pixel thiết bị khác nhau. Khi tôi chọn Nexus S từ menu, nó trông thật tuyệt vời.
Khi tôi chọn Nexus 4 từ menu, vị trí tắt.
Từ Chrome Dev cụ tôi thấy rằng đối với Nexus S phong cách tính là

(-webkit-max-device-pixel-ratio: 1) 

Đối với Nexus 4:

(-webkit-max-device-pixel-ratio: 1.5) 

này được CSS của tôi:

@media only screen and (orientation:landscape) and (-webkit-max-device-pixel-ratio: 1.5){ 
    .txt{ 
     top: 170px; 
     left: 150px; 
     position:absolute; 
     font-size:60px; 
    } 
} 

@media only screen and (orientation:landscape) and (-webkit-max-device-pixel-ratio: 3) and(-webkit-min-device-pixel-ratio: 2){ 
    .txt{ 
     top: 270px; 
     left: 200px; 
     position:absolute; 
     font-size:60px; 
    } 
} 

Và đây là thẻ meta viewport của tôi:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/> 

Tôi sử dụng mô phỏng.phonegap.com (AKA Ripple) để kiểm tra.

Answer 1

Bạn không thể sử dụng -webkit-max-device-pixel-ratio, vì nó chưa được hỗ trợ.

Tôi đã thêm câu trả lời này, vì nó giúp người dùng khác có cùng vấn đề tìm giải pháp nhanh hơn.

Answer 2

Đến cùng một vấn đề và đánh vào đầu tôi hơn một ngày. Cuối cùng nhận được giải pháp rằng truy vấn phương tiện được sử dụng bởi trình duyệt mặc định và WebKit của Cordova hoàn toàn khác.

Thay vì sử dụng trang chủ của bạn, hãy sử dụng trang http://mqtest.io trong trang bắt đầu PhoneGap của bạn và kiểm tra truy vấn phương tiện được tạo cho webkit cụ thể đó. Sử dụng nó trong ứng dụng của bạn. Có thể nhắm mục tiêu bất kỳ yếu tố màn hình nào.

Hãy thử và cho tôi biết nếu bạn có bất kỳ vấn đề nào.