Pertanyaan Sesuaikan aplikasi aplikasi Phonegap tanpa target-densitydpi = device-dpi


Saya telah membuat aplikasi menggunakan Phonegap untuk platform Android. Untuk mengimbangi resolusi perangkat yang berbeda (dpi) dan ukuran layar, dimensi semua elemen UI telah ditentukan dari segi em. Lalu saya menggunakan kueri media CSS untuk menetapkan ukuran font dasar yang berbeda menggunakan -webkit-device-pixel-ratio. Semuanya digunakan untuk bekerja dengan baik dan seperti yang diharapkan sampai saya menemukan bahwa target-densitydpi = device-dpi tidak lagi digunakan oleh webkit dan dukungan akan dihapus di masa depan. Berikut adalah tag area pandang meta saya sebelum menghapus target-densitydpi:

<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi">

Saya menemukan ketika saya menghapus target-densitydpi, aplikasi tidak lagi terlihat seperti yang diharapkan, bahkan dimensi viewport menurun secara dramatis. Berikut adalah screenshot sebelum dan sesudah diambil pada Xperia L (Android 4.1.2) memiliki lebar 480px dan window.devicePixelRatio 1,5:

sebelum menghapus target-densitydpi: http://imgur.com/c0Vnusk

setelah menghapus target-densitydpi: http://imgur.com/06mnUlJ

Aplikasi ini seharusnya terlihat seperti bekas tangkapan layar tanpa target-densitydpi, tetapi saya benar-benar bingung bagaimana mencapainya? Apakah ini membutuhkan penulisan ulang nilai-nilai CSS? Apakah ada cara untuk menerapkan target-densitydpi = device-dpi tanpa menggunakan tag meta?


5
2018-02-23 13:16


asal


Jawaban:


Saya menemukan solusinya menggunakan jQuery

Saya menambahkan kode berikut dan berfungsi seperti yang diharapkan sekarang, (Saya telah menambahkan id = 'viewport' ke tag meta html saya)

var viewportScale = 1 / window.devicePixelRatio;
$("#viewport").attr("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=2, width=device-width");

Ini akan mendukung layar dengan window.devicePixelRatio mulai dari 0,5 hingga 6


8
2018-02-24 05:28