Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

verschil in font-sizes op op mobiele browsers

Pagina: 1
Acties:

Vraag


  • samyung
  • Registratie: december 2016
  • Laatst online: 07-03-2020
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
​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]

Alle reacties


  • DJMaze
  • Registratie: juni 2002
  • Niet online
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

Maak je niet druk, dat doet de compressor maar


  • Creepy
  • Registratie: juni 2001
  • Laatst online: 21:51

Creepy

Moderator Devschuur®

Tactical Espionage Splatterer

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]

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have star problems" --Kevlin Henney


  • samyung
  • Registratie: december 2016
  • Laatst online: 07-03-2020
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
  • Registratie: september 2016
  • Laatst online: 01:55
<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
  • Registratie: augustus 2001
  • Niet online
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_
  • Registratie: juli 2003
  • Niet online

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

☀️🔋  18 Panelen | 5,8 kWp | SolarEdge SE6K


  • Toxic_Dreams
  • Registratie: september 2016
  • Laatst online: 01:55
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
  • Registratie: december 2016
  • Laatst online: 07-03-2020
ik vermoed een forum foutje. bedankt voor de reacties ik ga het proberen

  • gitaarwerk
  • Registratie: augustus 2001
  • Niet online
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
  • Registratie: februari 2001
  • Laatst online: 10-06 16:19
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).

Full-stack webdeveloper in Groningen


  • Harrie_
  • Registratie: juli 2003
  • Niet online

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?

☀️🔋  18 Panelen | 5,8 kWp | SolarEdge SE6K


  • DJMaze
  • Registratie: juni 2002
  • Niet online
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:
1
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.

Maak je niet druk, dat doet de compressor maar


  • Spinal
  • Registratie: februari 2001
  • Laatst online: 10-06 16:19
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.

Full-stack webdeveloper in Groningen


  • Harrie_
  • Registratie: juli 2003
  • Niet online

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?

☀️🔋  18 Panelen | 5,8 kWp | SolarEdge SE6K


  • Spinal
  • Registratie: februari 2001
  • Laatst online: 10-06 16:19
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.

Full-stack webdeveloper in Groningen


  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 02-06 19:16
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
  • Registratie: maart 2009
  • Laatst online: 02-06 19:16
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:
1
<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.
Pagina: 1


Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Microsoft Xbox Series X LG CX Google Pixel 5a 5G Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True