Farklı Android ekran boyutları/yoğunlukları için bir Phonegap uygulamasını ölçekleme?

Question

Android telefonlarda ve tabletlerde çalışmak üzere tasarlanmış bir Phonegap uygulamasına sahibim. Metin ve görüntülerin ölçeği bir telefonda iyi görünüyor, ancak 7 ”tablette çok küçük.

Phonegap tabanlı bir uygulama için çalışan farklı ekran boyutları/yoğunlukları için ölçeği ayarlamanın bir yolu var mı? Yerel bir Android uygulaması için, çoklu ekran düzenleri (android docs'da belirtildiği gibi) bir çözüm olabilir, ancak bu bir Phonegap tabanlı uygulama için kullanılabilir mi?

Ekran boyutuna göre yazı tipi boyutlarını ayarlamak için CSS ortam sorgularını kullanabilirim, ancak tüm arabirimi (görüntüler dahil) orantılı olarak ölçeklendirmek istiyorum.

Belirli ekran boyutlarına hedeflemek için ortam sorgu ile birlikte CSS zoom özelliğini kullanarak çalıştı, ancak bu kadar vida mutlak konumlama ve iScroll olarak kullanıcı arayüzü öğeleri fonksiyonuna müdahale: Ayrıca kullanarak çalıştı

@media only screen and (min-device-width : 768px) { 
    body{ 
     zoom: 125%; 
    } 
} 
@media only screen and (min-device-width : 1024px){ 
    body{ 
     zoom: 150%; 
    } 
} 

targetdensity-dpi meta viewport özelliği - 120dpi'ye ayarlanması, ölçeği 7 ”tablette daha iyi hale getirir, ancak telefonda çok büyüktür. Bu oldukça CSS daha HTML kodu gömülmüş olduğundan, medya sorguları ekran boyutuna göre bunu değiştirmek için kullanılamaz:

• HTC HD2, target-density=default: Burada

  <meta name="viewport" 
      content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi"> 
  

  bir dizge PhoneGap uygulamasından bazı ekran görüntüleri var

• HTC HD2, target-density=120dpi
• Nexus 7, target-density=default
• Nexus 7, target-density=120dpi

Answer 1

Sadece bunu cevaplamadım.Sonunda kullandığım çözüm, aygıt boyutlarına bağlı olarak yazı tipi boyutlarını ve görüntü varlıklarını açıkça ayarlamak için medya sorgularını kullanmaktı. Cihaz testi, bunun tüm hedef cihazlarda çalıştığını gösterdi: iPhone, iPad, Android telefonlar, Android 7 "tabletler, Android 10" masaları. Umarım başkasına yardım eder.

Örneğin

:

/* Start with default styles for phone-sized devices */ 
    p,li{ 
     font-size: 0.9em; 
    } 
    h1{ 
     font-size: 1.2em; 
    } 
    button{ 
     width: 24px; 
     height: 12px; 
    } 
    button.nav{ 
     background-image: url('img/phone/nav.png'); 
    } 

@media only screen and (min-device-width : 768px) { /* 7" tablets */ 
    p, li{ 
     font-size: 1.3em !important; 
    } 
    h1{ 
     font-size: 1.6em !important; 
    } 
    button{ 
      width: 32px; 
      height: 16px; 
    } 
    button.nav{ 
     background-image: url('img/tablet7/nav.png'); 
    } 
} 
@media only screen and (min-device-width : 1024px) { /* 10" tablets and iPad */ 
    p, li{ 
     font-size: 1.5em !important; 
    } 
    h1{ 
     font-size: 1.8em !important; 
    } 
    button{ 
     width: 48px; 
     height: 24px; 
    } 
    button.nav{ 
     background-image: url('img/tablet10/nav.png'); 
    } 
} 

Answer 2

Ben farklı çözümler birkaç önermek zorunda:

1. Değişim görüntü alanı dinamik px daha birimlerde rem Javascript (more info here)

2. Seti tüm boyutları kullanarak. Sonra belge yazı tipi boyutunu ayarlayarak her şeyi ölçeklendirebilirsiniz. Bir örnek Eskiz: Biz PhoneGap vazgeçmek

   function resize() { 
   var w = document.documentElement.clientWidth; 
   var h = document.documentElement.clientHeight; 
   var styleSheet = document.styleSheets[0]; 
   // ar = aspect ratio h/w; Replace this with your apps aspect ratio 
   var ar = 1.17; 
   // x = scaling factor 
   var x = 0.1; 
   var rem; 
   if (h/w > ar) { // higher than aspect ratio 
       rem = x * w; 
   } else { // wider than aspect ratio 
       rem = x * h; 
   } 
   document.documentElement.style.fontSize = rem + 'px'; 
   } 
   

Answer 3

önce onu geliştirmek deneyelim. Bu çözümü kullanarak çözene kadar sıkışmıştım.

Buna görünümünüzü değiştirin

:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /> 

Ref: Phonegap Application text and layout too small

Answer 4

hedef densitydpi kaldırılmış ve Pete LePage (https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB) 'ye göre Webkit çıkarıldığını düşünün, daha iyi bir düşünmek yaklaşım, yüksek dpi cihazlarını hedeflemek için medya sorgularını kullanmak zorundadır. Telefongaponunu düşürmeden önce,