HTML5 app - viewport probleem(pje)

[b2vjfvj75gjx7]

Hi,

Ik maak diverse apps voor zowel Android als Windows Phone. Alhoewel ik (in de basis) mijn weg wel kan vinden in JAVA en C#, maak ik de apps vooral in HTML5 / CSS / JS (met een full-screen browser-element die het weergeeft).

So far, so good - alleen loop ik tegen een vaag probleem aan;

Voor de helderheid beperk ik me even tot Windows Phone (met IE10 en IE11 als doelgroep, het gaat hier om WP8(.1) - maar wellicht geldt het ook voor Android (webkit).

Ik heb zelf alleen een Lumia 820 als test-device, met een resolutie van 800x480 pixels en een 4.3" scherm. Dat is tegelijk de kleinste resolutie / afmeting, dus op zich een goed uitgangspunt om je interface "passend" op te maken (grotere schermen tonen meer - maar dat zou alleen maar positief zijn).

Echter, laatst kreeg ik een screenshot onder ogen van een app (door mij gemaakt) op een Lumia 920. Deze telefoon heeft een resolutie van 1280x768 pixels en een schermafmeting van 4.5"

Je zou verwachten dat een groter scherm (in zowel pixels als "centimeters") ook meer beeld / informatie op het scherm kan toveren. Maar tot mijn verbazing was de interface van app op zowel het kleine, als het grote scherm exact gelijk; alsof de kleine versie - pixel perfect - was uitvergroot tot het beeldvullend was op het grotere scherm.

---

LUMIA 820

---

LUMIA 920

---

Wat ik - bij het ontwerp - voor ogen had, was echter dat je op een klein scherm iets van 4 buttons zou zien, en op een wat groter scherm alle (6) de buttons... maar dat deze wel even groot zouden zijn (iets van "één centimeter hoog", omdat het anders te klein voor je vingertoppen wordt).

Ik weet dat je - normaliter - niet met centimeters werkt, omdat resolutie / pixel density / schermafmeting / viewport settings / etc.. dat allemaal beïnvloeden, maar omdat het hier om een app gaat (die toch ook een fysieke beleving geeft), wil ik de buttons op elk scherm even groot houden (makkelijk aan te klikken), en bij grotere schermen gewoon meer buttons tonen;

---

MOCKUP

---

Bovenstaande afbeelding is hoe ik de app in een browser ontwerp, en hoe ik het (ongeveer) voor ogen had op een groot scherm;

- klein scherm; vier grote buttons, met een scrollbalkje.
- groot scherm; in ieder geval een paar buttons extra (scrollbalk boeit niet - die verschijnt alleen als het niet past) - maar het scherm is groter, dus je verwacht ook meer items te kunnen zien, zonder te hoeven scrollen...

---

Ik heb geexperimenteerd met de volgende viewport-settings, maar feitelijk zijn die allen hetzelfde (alleen de één doet het via de <meta-tag> en de ander via CSS).

METATAG 1

HTML:

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

METATAG 2

HTML:

<meta name="MobileOptimized" content="width" />

CSS

Cascading Stylesheet:

@media all and (orientation:portrait) {
    @-ms-viewport {
        width:device-width;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

---

Het resultaat blijft dat de layout altijd exact hetzelfde is, maar op grote schermen gewoon wordt opgeblazen (met giga-buttons ten gevolge...). Het liefst zie ik dus buttons op het formaat van de Lumia 820 terug op de Lumia 920 - maar dan wel wat meer buttons, omdat het scherm nu eenmaal groter is...

[Umbrah]

Tsja, je maakt een denkfout die denk ik hier goed uitgelegd staat:

reviews: Responsive web design: Tweakers-rwd onder de loep

De device/pixel-ratio. Beide telefoons zitten in feite rond de 640*360 effectief... het scherm is wel groter maar slechts marginaal zo, dat er in feite dus "geen verschil" in zit. Het wordt pas interresant als je een andere aspect ratio krijgt, wat gaat je app dan doen?

[b2vjfvj75gjx7]

De aspect-ratio tussen Lumia 820 en 920 is 100% gelijk (3:5).

Het hoeft ook niet zo nauw te luisteren, maar ik vind het vaag dat een groter scherm (meer pixels, meer "centimeters") in mijn set-up exact evenveel toont als een kleiner scherm...

Ik neem toch aan dat als je een website bezoekt op een klein scherm, je minder "in één oogopslag" ziet dan op een groot scherm (wat voor nut heeft een groot scherm, als die exact hetzelfde laat zien- maar dan alles 2x zo groot, bij wijze van spreken).

Voor wat de aspect-ratio's betreft, hieronder wat voorbeelden (maar die zijn niet realistisch; ik werk alleen portrait-mode - en desktop-chrome negeert sowieso de viewport). Ik kan wel met de unit VW /VH gaan werken, maar dan blijft het hetzelfde...

Ik wil dus niet dat de boel meeschaalt - maar een "vaste" grootte krijgt, en op grotere schermen gewoon meer buttons laat zien (waarom zou je anders een groter scherm willen hebben?).

---

[R4gnax]

b2vjfvj75gjx7 schreef op woensdag 12 november 2014 @ 14:08:
Ik wil dus niet dat de boel meeschaalt - maar een "vaste" grootte krijgt, en op grotere schermen gewoon meer buttons laat zien (waarom zou je anders een groter scherm willen hebben?).

Dat kun je wel willen, maar dat ga je niet krijgen.

Lees je eens in over het verschil tussen device pixels en logical pixels (ook wel bekend als 'css pixels'). Eerder genoemd device pixel ratio is het ratio tussen deze twee. Je hebt media queries die dit ratio kunnen gebruiken, wat dus inhoudt dat jij als developer een flinke portie rekenwerk gaat krijgen om al jouw afmetingen uiteindelijk doorgerekend op het scherm te krijgen zoals je wilt.

En dan ga je daarna nat omdat er 'tig Android devices zijn die een al dan niet bewust incorrect device pixel ratio meesturen. Juist omdat 'slimme' developers dit proberen te gebruiken om de grootte van een gebruikersinterface af te dwingen, terwijl dat helemaal niet is waar dit type query voor bedoeld is.