Verschil in fontgrootte tussen mobiele/desktop browsers

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Willem vp

Willem vp

11/05/2014 16:19:30
Quote Anchor link
Bij het bekijken van mijn -overigens niet voor mobiele browsers geoptimaliseerde- website, valt het me op dat op mobiele browsers de fontgrootte van sommige teksten kleiner is dan van andere teksten met dezelfde fontgrootte.

Ik heb het probleem gereduceerd tot onderstaande code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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?
 
PHP hulp

PHP hulp

19/04/2024 19:38:56
 
Jeroen VD

Jeroen VD

11/05/2014 18:22:38
Quote Anchor link
zet het doctype eens op HTML5, XHTML 1 is iets van behoorlijk wat jaren terug.
ook de charset op deze manier.

zou het kunnen liggen aan de browser op je telefoon?
 
Wouter J

Wouter J

11/05/2014 20:18:02
Quote Anchor link
>> zet het doctype eens op HTML5, XHTML 1 is iets van behoorlijk wat jaren terug.
>> 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? :)
 
Willem vp

Willem vp

11/05/2014 21:54:43
Quote Anchor link
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? :)

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:

Afbeelding

Via mijn laptop ziet het eruit zoals ik verwacht:

Afbeelding


Of, met alle styling van de website erbij laat een smartphone dit zien:

Afbeelding

terwijl het er zo uit zou moeten zien:

Afbeelding


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
 
Michael -

Michael -

12/05/2014 16:12:49
Quote Anchor link
> Zou het kunnen dat een smartphone-browser ergens een standaard style heeft die de font-size -op enkele uitzonderingen na- groter maakt?

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
@import url(http://fonts.googleapis.com/css?family=Oswald);
font-family: 'Oswald', sans-serif;
 
Frank Conijn

Frank Conijn

12/05/2014 20:49:28
Quote Anchor link
Het zou inderdaad aan de font kunnen liggen. Daar is echter op een makkelijke manier achter te komen, met behulp van dit testbestandje:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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
 
Willem vp

Willem vp

12/05/2014 22:57:15
Quote Anchor link
Het lijkt me niet dat het aan het font ligt. Er wordt namelijk in het hele document slechts 1 font gebruikt. Als de browser het font niet kent, zal hij een standaard font substitueren en daarmee verder werken. Dat verklaart het verschil in fontgrootte tussen de verschillende blokken niet.

De code kun je hier in werking zien: http://v3.nl/OTFO
 
Frank Conijn

Frank Conijn

13/05/2014 06:54:08
Quote Anchor link
Je redenering snijdt op zich hout, maar op:
* 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
 
Willem vp

Willem vp

13/05/2014 09:30:38
Quote Anchor link
Android heeft het ook, ik heb het in ieder geval gezien in Firefox, maar niet op dit stukje code. Wat ervoor nodig is om het op Android te reproduceren, weet ik nog niet.

Dit is de pagina in Verdana: http://v3.nl/J82m
 
Frank Conijn

Frank Conijn

13/05/2014 12:25:48
Quote Anchor link
Zelfde resultaat met Verdana: in alle drie configuraties ziet het er hetzelfde uit, en zoals het zou moeten. Met dien verstande dat sans-serif getoond wordt in Jelly Bean, omdat Jelly Bean geen Verdana geïnstalleerd heeft, alleen serif en sans-serif.

Je probleem wordt dus door iets anders veroorzaakt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.