Wie kann ich eine Phonegap App zwingen, die gleichen Proportionen unabhängig von der Bildschirmgröße beizubehalten?

Question

Ich schreibe meine erste Phonegap-App, und ich habe ein paar Kopfschmerzen mit all den verschiedenen Bildschirmgrößen. Also, da meine App nur auf Telefone ausgerichtet ist, denke ich, dass ich weiß, wie meine ideale Lösung arbeiten würde, aber ich bin nur völlig ahnungslos, wie ich es implementieren würde.

Grundsätzlich möchte ich die ganze Seite wie ein Bild verhalten. Anstatt die gleiche Größe beizubehalten und in neue Zeilen zu fassen, während der Bildschirm kleiner wird, möchte ich, dass die tatsächliche Schriftgröße des Textes abnimmt, wobei alle Abstände und Proportionen des Designs erhalten bleiben. Ich habe versucht, nur Prozentsätze zu verwenden, um Ränder, Breiten, Schriftgrößen, etc. zu definieren, aber es hat nicht genau so funktioniert, wie ich es gerne hätte.

Answer 1

Wenn Sie so etwas wie Bild mögen, dass die Schriftgröße, Abstand und Proportionen von Design schrumpfen/verringern, müssen Sie entsprechend Medien-Anfragen schreiben.

@media only screen and (max-width: 550px) { 
    .title { 
     font-size:11px 
    } 
    .body-box { 
     width:440px; 
    } 
} 

@media only screen and (max-width: 600px) { 
    .title { 
     font-size:12px 
    } 
    .body-box { 
     width:480px; 
    } 

} 

@media only screen and (max-width: 650px) { 
    .title { 
     font-size:13px 
    } 
    .body-box { 
     width:520px; 
    } 
} 

Dies hat auch einige Nachteile. Bei sehr kleinen Bildschirmen oder niedrig auflösenden Bildschirmen (etwa 350 Pixel), wenn Sie dieses Verhältnis beibehalten, sind es etwa 7 Pixel und diese Größe ist zu klein zum Lesen. Wenn jemand auf der Registerkarte QHD (2160px) sieht, wird die Schriftgröße 44px sein, was sehr groß sein wird.

Die langfristigen und optimalen Lösungen zu einer App wie Sie werden ein Responsive Design zu starten.

Sie können mit dem Entwurf Ihres HTML-App-Layouts beginnen, indem Sie Bootstrap verwenden. Es ist zuerst responsiv und mobil, und es wird das Layout beibehalten.

Ansonsten können Sie onsen.io Framework verwenden, das auch ein responsives HTML5-Framework für Cordova und Phonegap ist.