Verschil in fontgrootte tussen mobiele/desktop browsers
Ik heb het probleem gereduceerd tot onderstaande code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body style="font: 12px Verdana;">
<div>normale tekst</div>
<span style="display:inline-block;">kleine tekst</span>
normale tekst
<div style="display:inline-block;">kleine tekst</div>
<div style="font-size: 9px;">heel kleine tekst<div>
</body>
</html>
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body style="font: 12px Verdana;">
<div>normale tekst</div>
<span style="display:inline-block;">kleine tekst</span>
normale tekst
<div style="display:inline-block;">kleine tekst</div>
<div style="font-size: 9px;">heel kleine tekst<div>
</body>
</html>
Wanneer ik dit bekijk op een desktop-browser, is alle tekst even groot (behalve dan de "heel kleine tekst" uiteraard). Bekijk ik het echter op een iPhone, dan is de font-grootte van de teksten in de inline-block-elementen een stuk kleiner dan de overige tekst. In dit voorbeeld is de kleine tekst iets groter dan de 9px-tekst, maar op de live-website is de tekst binnen de span zelfs kleiner dan de 9px-tekst.
Als ik alle block-elementen weghaal, wordt de "normale tekst" even klein als de "kleine tekst".
Op Android-browsers heb ik dit verschijnsel ook gezien, maar daar treedt het minder consequent op. Zelf kan ik het niet testen op Windows Phone-systemen, maar ook daarvan heb ik klachten ontvangen.
Weet iemand waar dit door wordt veroorzaakt en -nog beter- hoe ik het kan verhelpen?
ook de charset op deze manier.
zou het kunnen liggen aan de browser op je telefoon?
>> ook de charset op deze manier.
Een browser negeert alles wat na "doctype html (public)" komt en renderd je pagina altijd via de laatste parser. Hier moet het probleem is niet aan liggen.
De "nieuwe charset" is slechts een shortcut voor de oude variant, kan ook geen problemen opleveren.
Willem, begrijp ik het goed dat als je deze code bekijkt op een telefoon je vreemde tekstgroottes ziet? Of heb je nu, voor het voorbeeld, wat stijlen weggehaald?
En die inline CSS zijn hopelijk ook alleen voor het voorbeeld? :)
Wouter J op 11/05/2014 20:18:02:
Willem, begrijp ik het goed dat als je deze code bekijkt op een telefoon je vreemde tekstgroottes ziet? Of heb je nu, voor het voorbeeld, wat stijlen weggehaald?
En die inline CSS zijn hopelijk ook alleen voor het voorbeeld? :)
En die inline CSS zijn hopelijk ook alleen voor het voorbeeld? :)
De inline styles zijn inderdaad alleen even voor het voorbeeld. ;-)
Als ik bovenstaande code bekijk via een smartphone, dan ziet het er uit als dit:
Via mijn laptop ziet het eruit zoals ik verwacht:
Of, met alle styling van de website erbij laat een smartphone dit zien:
terwijl het er zo uit zou moeten zien:
Het interessante is dat de regel met "wegafsluiting" kleiner wordt weergegeven dan de onderste regel ("verwachte eindtijd"), terwijl de font size 12px is en die van de onderste regel 9px.
Toevoeging op 11/05/2014 22:01:08:
Hmm... wat ik zo zit te bedenken: het lijkt erop dat het niet zozeer de inline-block-tekst is die kleiner wordt weergegeven, maar de gewone tekst die groter wordt gemaakt.
Zou het kunnen dat een smartphone-browser ergens een standaard style heeft die de font-size -op enkele uitzonderingen na- groter maakt?
Gewijzigd op 11/05/2014 21:58:06 door Willem vp
Dat kan heel goed. Je gebruikt een lettertype, Verdana, die een mobiel niet kent. Dus daarvoor wordt een standaardlettertype gebruikt en elk lettertype heeft een verschillende grote.
Probeer eens een webfont te gebruiken. Zelf gebruik ik de Google Fonts die ik zelf erg prettig vind.
Code (php)
1
2
2
@import url(http://fonts.googleapis.com/css?family=Oswald);
font-family: 'Oswald', sans-serif;
font-family: 'Oswald', sans-serif;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Lettergrootte</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body style="font: 12px 'sans-serif';">
<div>Divtekst</div>
<span style="display:inline-block;">Inline-blocktekst</span>
Losse tekst
<div style="display:inline-block;">Inline-blocktekst</div>
<div style="font-size: 9px;">Divtekst, 9px<div>
</body>
</html>
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Lettergrootte</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body style="font: 12px 'sans-serif';">
<div>Divtekst</div>
<span style="display:inline-block;">Inline-blocktekst</span>
Losse tekst
<div style="display:inline-block;">Inline-blocktekst</div>
<div style="font-size: 9px;">Divtekst, 9px<div>
</body>
</html>
Sans-serif (= Arial) staat op alle mobiele telefoons, tablets en computers. En als je het bestandje online zet en je hier de URL post, is er misschien iemand met een Windows Phone die kan kijken hoe het er daarop uitziet. Plus dat wij kunnen kijken met onze eigen telefoons, want de ene Android-telefoon, en dan vooral de -telefoonbrowser, is de andere niet.
Gewijzigd op 12/05/2014 20:50:01 door Frank Conijn
De code kun je hier in werking zien: http://v3.nl/OTFO
* een Android-telefoon (v. 4.1 Jelly Bean) met Chrome,
* dezelfde telefoon met Androids eigen browser,
* Windows Vista met Firefox,
ziet het er met sans-serif allemaal hetzelfde uit, en precies zoals het zou moeten: alleen de Divtekst 9px is kleiner. Kun je het bestandje ook nog even online zetten met Verdana als lettertype?
Gewijzigd op 13/05/2014 07:12:51 door Frank Conijn
Dit is de pagina in Verdana: http://v3.nl/J82m
Je probleem wordt dus door iets anders veroorzaakt.