Font-størrelse i mobile web-apps

[Poul C]

Hej

Jeg sysler lidt med udvikling af web-apps til mobil i
HTML5/CSS/JavaScript, - og det har jeg (nogenlunde) styr på.

Med undtagelse af font-størrelsen, - når app'en kommer over på mobilen!
Det så ikke kønt ud i starten!

Årsagen hertil var naturligvis forskellen i dpi (PC'en = 96dpi, - Mobilos =
316dpi)
Min løsning er indtil videre at angive ALLE størrelser i 'em' og ikke i 'px'
(fonte, billeder, knapper, <div>'s m.m.)

På PC'en har jeg
font-size:100%;
hvilket jeg så ændrer, når app'en kommer over på mobilen (under "run-time")
Lige nu prøver jeg mig lidt frem med %-tallet, - selvom min logik siger, det
nok bør være 316/96 = 329%

Ved hjælp af:
HTML: <div id="ppitest"
style="width:1in;visible:hidden;padding:0px"></div>
JavaScript: screenPPI = document.getElementById('ppitest').offsetWidth;

-- kan jeg aflæse mobilens dpi og så styre %-tallet på denne måde.

Det lyder lidt som en - lidt for nem - all-round metode! (?)

Hvad er 'best practice' på dette område?


Mvh Poul C

PS: jeg har forhindret zoom på mobilen med:
<meta name='viewport' content='width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;' />

PPS: Jeg bruger ingen form for emulator, men afprøver i browseren på PC'en
og kopierer så "råt" over på mobilen.

[Bertel Lund Hansen]

Poul C skrev:

> På PC'en har jeg
> font-size:100%;

Hvorfor prøve at tvinge brugeren til en bestemt størrelse?

> hvilket jeg så ændrer, når app'en kommer over på mobilen (under "run-time")
> Lige nu prøver jeg mig lidt frem med %-tallet, - selvom min logik siger, det
> nok bør være 316/96 = 329%

Hvis jeg igen får en Android, installerer jeg igen Operas app på
den. Så kan jeg zoome trinløst, og teksten tilpasser sig
automatisk den plads der er til rådighed.

Selv den kastrerede browser mobilen var født med kunne zoome
teksten, men dog ikke tilpasse den.

Min pointe er at folk nok har lært at tilpasse deres
computer/bærbare/mobiler til sider der ser meget forskellige ud.
Det gør sandsynligvis kun livet mere besværligt at du prøver at
gætte på hvad de foretrækker (hvis de bruger samme mobil som
dig).

> PS: jeg har forhindret zoom på mobilen med:

Auughhhhh!!!!!!!!
Hvis det virker, ville jeg forlade den side med det vuns.

--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/

[scootergrisen]

Du kan bruge Firefox OS Simulator til at en bedre oplevelse af hvordan
det ville se ud på en rigtig mobil :
https://addons.mozilla.org/da/firefox/addon/firefox-os-simulator/

Prøv og kom med link til din webapp så kan vi prøve det.

[Poul C]

Hej

"Bertel Lund Hansen" skrev:

>Hvis jeg igen f�r en Android, installerer jeg igen Operas app p�
>den. S� kan jeg zoome trinl�st, og teksten tilpasser sig
>automatisk den plads der er til r�dighed.

Er hermed gjort. Ser lovende ud...

>> PS: jeg har forhindret zoom p� mobilen med:

>Auughhhhh!!!!!!!!
>Hvis det virker, ville jeg forlade den side med det vuns.

S�vidt jeg forst�r tingene, s� er en "app" et meget simpelt program, hvori
der ikke kan zoomes (i mods�tning til en alm web-side).

Mine apps er kun til privat brug, derfor vil det v�re rart at de startede i
den rigtige zoom tilstand.


Mvh Poul C

[Poul C]

Hej

"scootergrisen" skrev:

>Du kan bruge Firefox OS Simulator til at en bedre oplevelse af hvordan

Har hentet Operas' app, ... det er vist lidt i samme retning

>Prøv og kom med link til din webapp så kan vi prøve det.

Indtil videre er der kun tale om htlm-filer, som jeg kopierer direkte til
mobilen.


Mvh Poul C

[scootergrisen]

>> Prøv og kom med link til din webapp så kan vi prøve det.
> Indtil videre er der kun tale om htlm-filer, som jeg kopierer direkte
> til mobilen.

Ok men det er 1000 lettere for os at finde fejl hvis vi har adgang til
at teste koden.

[Kim Ludvigsen]

Poul C skrev:

> Min løsning er indtil videre at angive ALLE størrelser i
> 'em' og ikke i 'px' (fonte, billeder, knapper, <div>'s m.m.)

Hvorfor ikke bare bruge %?

> På PC'en har jeg
> font-size:100%;

Du mener i browserens indstillinger? Ud fra ovenstående
bruger du jo ikke % på hjemmesiden.

> Lige nu prøver jeg mig lidt frem med %-tallet, - selvom min
> logik siger, det nok bør være 316/96 = 329%

100% burde gøre det til almindelig tekst, og så en passende
procentvis ændring til overskrifter og lignende.

> -- kan jeg aflæse mobilens dpi og så styre %-tallet på denne
> måde.

Det er vist at gå over åen efter vand. Det burde virke med
%. Hvis siden kun er beregnet til dig selv, og det ikke
virker med %, så fortæl lige, hvilken browser du bruger på
mobilen.

> PS: jeg har forhindret zoom på mobilen med:
> <meta name='viewport' content='width=device-width;
> initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

Hvorfor?

> PPS: Jeg bruger ingen form for emulator, men afprøver i
> browseren på PC'en og kopierer så "råt" over på mobilen.

Vil det sige, at du rent faktisk slet ikke har set
resultatet på mobilen endnu? I så fald vil første skridt nok
lige være at tjekke på den, inden du begynder at lede efter
mere eller mindre avancerede løsninger på et problem som
måske slet ikke er der.

--
Mvh. Kim Ludvigsen
Hold din drømmeferie i Thailand. Find tips og info på:
http://rejse-til-thailand.dk

[Poul C]

Hej igen

"scootergrisen" skrev:

>Ok men det er 1000 lettere for os at finde fejl hvis vi har adgang til at
>teste koden.

Naturligvis, - men det var nu mere generelle retningslinier til hvordan man
g�r, n�r man �nsker at en apps skal starte op uden at brugeren skal zoome
ind eller ud, jeg var ude efter.
En aps skal altid starte op p� samme m�de for alle brugere.

Selvf�lgelig: l�sningen er at lave "native apps" der er tilpasset en et
specifik model. ( i Java eller Object C)


Mvh Poul C

PS: min app skal ikke offentligg�res, men - stort seet - kun bruges p� min
egen mobil.

[Bertel Lund Hansen]

Poul C skrev:

> S�vidt jeg forst�r tingene, s� er en "app" et meget simpelt
> program, hvori der ikke kan zoomes (i mods�tning til en alm
> web-side).

Undskyld. Jeg r�g ud af en tangent og glemte at det var en app.

Men der kan vel zoomes hvis man indbygger det i appen? Det vil s�
bare g� ud over designet.

[Poul C]

Hej

"Kim Ludvigsen" skrev:

>Hvorfor ikke bare bruge %?

I HTML/CSS bruger jeg % og 'em' , m�ske burde det v�re % overalt?

>Du mener i browserens indstillinger?

Nej

>Ud fra ovenst�ende bruger du jo ikke % p� hjemmesiden.
Jo

>Vil det sige, at du rent faktisk slet ikke har set resultatet p� mobilen
>endnu? I s� fald vil f�rste skridt nok lige v�re at tjekke p� den, inden du
>begynder at lede efter mere eller mindre avancerede l�sninger p� et problem
>som m�ske slet ikke er der.

Nej tv�rtigmod!!

Jeg laver en simpel kopiering af html-filen til mobilen. Derp� kan jeg
afvikle den direkte i brovseren.
Det eneste der er galt er at font st�rrelsen ikke er som jeg ser det p� min
PC
(Hvilker, som n�vnt, er ret logisk)

Mvh Poul C

[Kim Ludvigsen]

Poul C skrev:

> "Kim Ludvigsen" skrev:
>
>> Hvorfor ikke bare bruge %?

> I HTML/CSS bruger jeg % og 'em' , måske burde det være %
> overalt?

Prøv, jeg kan forestille mig, at det vil løse problemet. Og
hvis ikke, så prøv evt. med en anden browser på mobilen.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

[John]

Den 20-02-2013 16:10, Poul C skrev:
> Hej
>
> Jeg sysler lidt med udvikling af web-apps til mobil i

> HTML5/CSS/JavaScript, - og det har jeg (nogenlunde) styr p�.
>
> Med undtagelse af font-st�rrelsen, - n�r app'en kommer over p� mobilen!
> Det s� ikke k�nt ud i starten!
>
> �rsagen hertil var naturligvis forskellen i dpi (PC'en = 96dpi, -
> Mobilos = 316dpi)
> Min l�sning er indtil videre at angive ALLE st�rrelser i 'em' og ikke i

> 'px' (fonte, billeder, knapper, <div>'s m.m.)
>

> P� PC'en har jeg
> font-size:100%;
> hvilket jeg s� �ndrer, n�r app'en kommer over p� mobilen (under "run-time")
> Lige nu pr�ver jeg mig lidt frem med %-tallet, - selvom min logik siger,
> det nok b�r v�re 316/96 = 329%
Mon ikke fonten bliver for stor?

>
> Ved hj�lp af:

> HTML: <div id="ppitest"
> style="width:1in;visible:hidden;padding:0px"></div>
> JavaScript: screenPPI = document.getElementById('ppitest').offsetWidth;
>

> -- kan jeg afl�se mobilens dpi og s� styre %-tallet p� denne m�de.

>
> Det lyder lidt som en - lidt for nem - all-round metode! (?)
>

> Hvad er 'best practice' p� dette omr�de?
>
>
> Mvh Poul C
>
> PS: jeg har forhindret zoom p� mobilen med:

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

> PPS: Jeg bruger ingen form for emulator, men afpr�ver i browseren p�
> PC'en og kopierer s� "r�t" over p� mobilen.

[Poul C]

Hej

"John" skrev i meddelelsen:

>Mon ikke fonten bliver for stor?

Nej det passer faktisk!

.. og mit design virker nu:

* jeg kan "designe" p� PC-sk�rmen s�ledes det ser OK ud der
** simpel fil-kopi til MOBILOS' og afpr�vning her, - og fonten har en
passende st�rrelse ogs� her!!

(jeg indl�gger et tjek s�leedes:
fntSize = screenPPI/96*100;
if (screenPPI>96)
setStyle("elem","fontSize" , fntSize + "%") // Samsung
S3 => 316/96*100 = 329%

hvor setStyle er:

function setStyle(element,prop,value) // prop er i JavaScript notation ( og
IKKE CSS ! ! )
{
var elem = document.getElementById(element);
elem.style[prop] = value;// array notation
}

.. og screenPPI er forklaret i mit f�rste indl�g


Mvh Poul