verschil in font-sizes op op mobiele browsers

[samyung]

ik ben sinds kort bezig met html css en ben nu bezig met het bouwen van de mobiele versie van mijn site doormiddel van media queries. Echter loop ik tegen een probleem aan. als ik mijn site op crome op de mobiel bekijk is het lettertype veel groter dan op firefox op de mobiel. ik heb nog maar 1 media querie gebruikt de andere ben ik nog mee bezig. mijn site staat ook online op ahmedewerker.nl/test1234

hier mijn css code

Cascading Stylesheet:

​body, html {color:#FFFFFF; font-family: 'Open Sans' !important; background-color:#007AFF; }

a {font-family: 'Open Sans', sans-serif;}

p {color:#FFFFFF; font-family: 'Open Sans', sans-serif;}

a:hover {font-style:italic;}
a:link {color:#FFFFFF;}
A {text-decoration: none; color:#FFFFFF;}


.navbar {overflow: hidden; position: fixed; top: 0; width: 100%; }

.navbar a {float: right; display: block; color:#FFFFFF; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }


#wrapper {width:980px;  margin:auto;}


#header img {width:100%;}

#header {Margin-top:270px;}


#text {width:600px; padding-left:240px;}


.afb11 {float:left; }
.afstand {margin-left:185px; width:600px;}


#go {clear:both;}


    #ganaar {border:thin #FFFFFF; height:610px; width:190px;  padding-left:140px; ​  float:left; display:inline-block; }

    #ganaar2 {border:thin #FFFFFF; height:610px; width:190px;   ​  float:left; display:inline-block; margin-left:80px;}

    #ganaar3 {border:thin #FFFFFF; height:610px; width:190px; ​  float:left; display:inline-block; margin-left:80px;}

    #ganaar {margin-top:90px;}

    #ganaar2 {margin-top:90px;}

    #ganaar3 {margin-top:90px;}


        .pijl {float:left; }

        .pijl p {font-size:27px;}

        .marginn {margin-left:37px; }

        .gri {font-size:14px; }


#all {margin-right:140px; margin-top:56px;}
            
#all p {clear:both; float: right;  font-weight:bold;}


h1 {font-size:19px;}
h2 {font-size:19px; color:#FFFFFF;}
h3 {font-size:19px; color:#FFFFFF; margin-bottom:0px;}

h4 , h5 , h6, h7, h8, h9, h10, h11, h12 {font-size:18px; color:#FFFFFF; font-weight:bold; margin-bottom:0px; margin-top:0px;}


/*mobiel staand groot/ ipad staand*/
@media screen and (orientation:portrait) and (min-width:750px) and (max-width:1090px){
p {font-size:20px;}
a {font-size:20px;}
    #wrapper {width:780px;}
     #ganaar {padding-left:10px;}
    #header {Margin-top:10px;}
    
    h1 {font-size:23px;}
h2 {font-size:23px; color:#FFFFFF;}
h3 {font-size:23px; color:#FFFFFF; margin-bottom:0px;}
    
    h4 , h5 ,h6 , h7, h8, h9, h10, h11, h12 {font-size:23px;}
    
    #ganaar3 {display:none;}
    #text { width:680px; padding-left:10px;}
    

}

[Voor 0% gewijzigd door Creepy op 26-10-2018 14:37]

[DJMaze]

1. gebruik [ code=css ] tags
2. je verwijst naar google voor een niet bestaand lettertype
3. je CSS heeft een BOM header (kladblok/notepad gebruikt?)

Dus ja, je website ziet er anders uit op elke browser/os vanwege geinstalleerde/beschikbare fonts

[Creepy]

De css code heb ik even in een codeblok gezet, dat maakt het wat leesbaarder. Ondanks wat DJMaze zegt bestaat je lettertype wel degelijk. Er lijkt wat mis te gaan met de font-sizes. Als ik wat paragaven op de desktop inspecteer dan komt er geen font-size mee.

Je topic staat ook op de verkeerde plek trouwens. Frontend zaken e.d. mogen in Webdesign, Markup & Clientside Scripting dus ik verplaats je topic ook gelijk.

[Voor 24% gewijzigd door Creepy op 26-10-2018 14:43]

[samyung]

bedankt voor jullie reactie echter in de eerste media querie (voor de mobiel) heb ik deze twee wel staan of is dat niet voldoende

p {font-size:20px;}
a {font-size:20px;}

[Toxic_Dreams]

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Even bovenstaande regel toevoegen in je head. Daarbij staat je media query op een min-width van 750px, de schermen van telefoons zijn over het algemeen minder breed

Je font is inderdaad gewoon goed, ik zou nog wel wat verschillende font-weights toevoegen. Anders ziet dikgedrukte tekst er een beetje vreemd uit, aangezien die dit dan zelf gaan proberen dikgedrukt te maken.

[Voor 30% gewijzigd door Toxic_Dreams op 26-10-2018 14:55]

[gitaarwerk]

Er zitten allemaal rare tekens in je CSS. Misschien kan de browser dit niet fatsoenlijk uitlezen meer. (Misschien is dit omdat het eerst een andere tag had, kan ook een forum-dingetje zijn).

Je kunt sowieso default font-sizes in de body zetten

body { font-size: 20px; }

[Voor 19% gewijzigd door gitaarwerk op 26-10-2018 15:12]

[Harrie_]

Het probleem zit 'm in wat @Toxic_Dreams al zegt. Dat de verschillende browsers anders schalen. Op het moment dat de site gewoon responsive is wil je niet dat de site automatisch gaat schalen dus inderdaad de meta-viewport in je html zetten met een scale van 1

[Toxic_Dreams]

gitaarwerk schreef op vrijdag 26 oktober 2018 @ 15:11:
Er zitten allemaal rare tekens in je CSS. Misschien kan de browser dit niet fatsoenlijk uitlezen meer. (Misschien is dit omdat het eerst een andere tag had, kan ook een forum-dingetje zijn).

Je kunt sowieso default font-sizes in de body zetten

body { font-size: 20px; }

Staat inderdaad een vreemd teken in, maar het lijkt niet uit te maken - CSS is sowieso erg vriendelijk. Ik ben het eens met het feit dat je het beste een standaard font-size meegeeft, zoals 16px o.i.d. zodat de browser niet zelf bepaald.

[samyung]

ik vermoed een forum foutje. bedankt voor de reacties ik ga het proberen

[gitaarwerk]

Even kort door de bocht: Kijk eens naar rems.

html { font-size: 62.5% }
body { font-size: 1.6rem; }

(iedere rem staat voor ongeveer 10px)

Meer info; https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Misschien wat too soon, maar dit is wel prettig om mee te werken eventueel :-)

[Spinal]

Toxic_Dreams schreef op vrijdag 26 oktober 2018 @ 14:53:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Even bovenstaande regel toevoegen in je head.

Nee, doe alsjeblieft niet. maximum-scale=1 toevoegen zorgt ervoor dat je niet meer kunt inzoomen (tenzij je dat in je browser kunt uitzetten, zoals in Opera op Android).

[Harrie_]

Spinal schreef op maandag 29 oktober 2018 @ 08:59:
[...]

Nee, doe alsjeblieft niet. maximum-scale=1 toevoegen zorgt ervoor dat je niet meer kunt inzoomen (tenzij je dat in je browser kunt uitzetten, zoals in Opera op Android).

En wat is daar op tegen op het moment dat je de GUI exact hebt afgestemd op de viewport (telefoon in dit geval). Een mobiele app kun je ook niet inzoomen?

[DJMaze]

Creepy schreef op vrijdag 26 oktober 2018 @ 14:40:
Ondanks wat DJMaze zegt bestaat je lettertype wel degelijk.

Ja en nee, mijn uBlock Origin blokkeert remote fonts.
Dus ja het lettertype "bestaat niet" bij mij.
En aangezien er geen OS fonts zijn opgegeven bepaalt mijn browser zelf welk lettertype.
En dan alleen iets als "verdana" opgeven omdat dat bestaat op Windows OS werkt niet op mijn GNU/Linux OS en ook niet op mijn Android.

Daarom schrijf je iets als:

Cascading Stylesheet:

font-family: "Open Sans", "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;

Ik zeg niet dat dit correct is, het is een voorbeeld om d.m.v. fallbacks, lettertypes te pakken die vergelijkbaar in grootte zijn zodat ze op elk OS ongeveer evenveel ruimte innemen.

[Spinal]

Harrie_ schreef op maandag 29 oktober 2018 @ 09:03:
[...]

En wat is daar op tegen op het moment dat je de GUI exact hebt afgestemd op de viewport (telefoon in dit geval). Een mobiele app kun je ook niet inzoomen?

Daar zijn vele redenen voor te verzinnen, bijvoorbeeld mensen die oogproblemen hebben en de tekstgrootte die jij hebt gekozen misschien wel te klein vinden.

[Harrie_]

Spinal schreef op maandag 29 oktober 2018 @ 13:35:
[...]

Daar zijn vele redenen voor te verzinnen, bijvoorbeeld mensen die oogproblemen hebben en de tekstgrootte die jij hebt gekozen misschien wel te klein vinden.

Dat snap ik. Maar ik blijf bij mijn opmerking 'in een app kunnen ze het ook niet wijzigen'. Dus in een app is het geen probleem dan?

[Spinal]

In een app is dat uiteraard ook een probleem, al nemen volgens mij de meeste apps wel de instellingen van het OS over, dus grotere letters in het OS betekent grotere letters in apps. De meeste websites doen dat niet en zetten een "harde" grootte in de website, dus bijv. "18px" en niet "1em" als standaard.

[R4gnax]

Harrie_ schreef op maandag 29 oktober 2018 @ 14:32:
[...]


Dat snap ik. Maar ik blijf bij mijn opmerking 'in een app kunnen ze het ook niet wijzigen'. Dus in een app is het geen probleem dan?

In een app is het net zo groot een probleem, wanneer deze bijv. niet de font-grootte instellingen v/h OS mee over kan nemen. Dat het in een app niet goed hoeft te gaan, wil niet gelijk zeggen dat je er dan ook maar niet meer op hoeft te letten in een browser.

Als iemand van een brug springt, spring jij er ook niet achterheen. Of wel?

[Voor 9% gewijzigd door R4gnax op 31-10-2018 19:40]

[R4gnax]

Toxic_Dreams schreef op vrijdag 26 oktober 2018 @ 14:53:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Even bovenstaande regel toevoegen in je head.

Die is hopeloos achterhaald en incorrect. Wat je nodig hebt is:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">

Je stelt de breedte van de viewport in op de natuurlijke device width en de initiële zoom-factor op 1:1.

De minimum-scale zorgt er weliswaar voor dat je niet verder uit kunt zoomen, maar tegelijkertijd zet het op heel veel Android phones in Chrome ook hardware rasterization aan, waar complex tekenwerk flink veel sneller van kan worden. En laten we eerlijk wezen: als je site niet breder wordt dan de native viewport van je device (want width=device-width) dan gaat niemand de mogelijkheid om verder uit te zoomen missen.

De shrink-to-fit waarde is een Apple dingetje. Zorgt ervoor dat Apple browsers op iOS zich niet gaan gedragen alsof width=device-width niet is gezet, wanneer je de browser in een sidebar gesnapt zet.