2013-07-14 26 views
5

içinde Android için cihaz piksel oranına ayarlamayla ilgili sorunlar Farklı cihaz piksel oranlarına sahip cihazlarda düzgün çalışmak için medya sorguları almaya çalışıyordum. Menüden Nexus S öğesini seçtiğimde, harika görünüyor.
Menüden Nexus 4'ü seçtiğimde, yerleştirme kapalı. Chrome Dev Araçlar
Ben Nexus S için hesaplanan stil Nexus 4 içinPhonegap

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

olduğunu görüyoruz:

@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; 
    } 
} 
:


Bu

(-webkit-max-device-pixel-ratio: 1.5) 
benim CSS edilir

Ve bu benim meta viewport etiketim:

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

Test için emulate.phonegap.com (AKA Ripple) kullanıyorum.

+0

Peki, sorunuz nedir? –

+0

Nexus 4 neden gerçek DPR 2 olduğunda (-webkit-max-device-pixel-ratio: 1.5) kullanıyor? – shortnamed

+1

Hm -max önekinin desteklenip desteklenmediğinden emin değilim. http://bjango.com/articles/min-device-pixel-ratio/ Sadece min –

cevap

3

-webkit-max-device-pixel-ratio'u kullanamazsınız, çünkü (henüz) desteklenmemektedir.

Bu sorunu ekledim, çünkü aynı sorunu olan diğer kullanıcıların daha hızlı çözüm bulmasına yardımcı oluyor.

0

Aynı konuyla karşılaştı ve bir günden daha fazla başıma çarptı. Son olarak, varsayılan tarayıcı ve Cordova WebKit tarafından kullanılan medya sorgusunun tamamen farklı olduğu çözümü aldı.

Ana sayfanızın yerine PhoneGap başlangıç ​​sayfanızdaki http://mqtest.io kullanın ve söz konusu web takımı için oluşturulan medya sorgusunu kontrol edin. Bunu uygulamanızda kullan. Herhangi bir ekran faktörünü hedefleyebilir.

Sorun yaşarsanız lütfen bildirin.

+0

'atmedia.info' alan adının süresi doldu! – Azmeer

+0

Alternatif - http://mqtest.io – Ragu