CSS voor mobiel

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Aad B

Aad B

14/01/2020 13:31:41
Quote Anchor link
Ik probeer een grafiek van mijn webpagina mooi op mijn mobiel te krijgen maar dat lukt niet. Ik ben echt niet ingeburgerd met dit soort css dus ik staopen voor tips. De CSS voor mijn mobiel is onderstaand (een stukje) en de webpagina maakt wel gebruik van dit deel van de css maar de grafiek komt maar half in beeld op mijn mobiel en ik moet het beeld dan kleiner schalen met de vingers om de hele grafiek te zien. Doe ik iets fout met de css? De website met grafiek is www.el5.nl op de indexpagina. Op mobiel probeer ik alles onder elkaar te krijgen middels de css. Dit deel css staat nog niet online
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
15
16
17
18
19
20
21
22
23
24
25
26
/* On screens that are 600px wide or less. iPhone7 Nokia Lumia */
@media screen and (max-width: 600px) {

#content {
         position:top;
         left: 0px;
         height:1450px;
         width:600px;
         font-size:40px;
         }

#header {
         position:relative;
         left: 0px;
         height:100px;
         width:100%;
         font-size:40px;
         text-align: center;
         }
#grafiek {
         position:relative;
         width: 100%;
         height:600px;
         float:left;
         font-size: 40px;
         }
Gewijzigd op 14/01/2020 14:00:14 door Aad B
 
PHP hulp

PHP hulp

19/03/2024 11:07:47
 
J opla

j opla

14/01/2020 23:22:38
Quote Anchor link
hoi,

Ik wil wel proberen te kijken, maar wat is de bijbehorende html code?
 
- Ariën  -
Beheerder

- Ariën -

14/01/2020 23:24:05
Quote Anchor link
Kan je eventueel op JSfiddle een test-case plaatsen?
 
J opla

j opla

14/01/2020 23:27:16
Quote Anchor link
wat gebeurd er als je #grafiek {height:600px} weg haalt? Of verkleind?
het kan ook misschien helpen als je de width niet op 100% zet, maar 100vw (= % van viewport width)

Toevoeging op 14/01/2020 23:31:06:

Volgens mij ontbreekt in je head deel de volgende meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
Aad B

Aad B

15/01/2020 19:48:08
Quote Anchor link
Dank voor de reacties. Ik had de probleem versie nog niet online. Daardoor kon je niet zien dat de tag <meta name="viewport" wel al in de <head> stond, dat had ik al eerder ergens gevonden. Nu ook in de css de tips van J OPLA geprobeerd en dat levert resultaat op, waarvoor dank!! Het is nog niet zoals ik wil maar er gebeurt tenminste iets. Ik ga er mee verder. Deze testversie is nu te zien op www.el5.nl/gr10.php
 
J opla

j opla

15/01/2020 20:35:06
Quote Anchor link
Hoi Aad,

Als ik in je CSS file kijk dan zou ik overwegen om:
- de css vanuit het kleinste apparaat op te zetten, en niet vanuit het grootste
- let op, als je een waarde bijvoorbeeld bij media <992px hebt gedefinieerd is die in principe ook geldig voor <600px. Daarom moet je alles wat je aan de browser over wil laten en niet vast wil leggen bij <600px weer op "initial" zetten. Als je andersom werkt, is dat handiger.
- veel van de "position" en "height" tags te verwijderen tenzij je ergens een specifiek doel mee hebt. Op mobiel wil je toch over het algemeen alleen vertikaal scrollen, omdat de breedte beperkt is wil je de hoogte laten bepalen door de inhoud.
- normaal neemt het onderliggende item waarden over van het bovenliggende. Je hebt een mooie container met #content. De font-size die je daar in vult wordt in de onderliggende block-en over genomen.
- een font-size van 40px lijkt me wat groot.

Ik heb wat dingen aangepast en dan krijg ik denk ik het resultaat dat je wil:
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
15
16
17
18
19
20
21
22
23
24
25
26
/* On screens that are 600px wide or less. iPhone7 Nokia Lumia */
@media screen and (max-width: 600px) {

#content {
         position:initial;
         left: initial;
         height:initial;
         width:100vw;
         font-size:40px;
         }

#header {
         position:initial;
         left: initial;
         height:initial;
         width:initial;
         font-size:initial;
         text-align: center;
         }
#grafiek {
         position:initial;
         width: initial;
         height:initial;
         float:initial;
         font-size: initial;
         }



Zoals aangegeven, kan je bij een omgekeerde opbouw alle regels met "initial" (terug naar fabriekswaarde/standaard browser instelling) verwijderen.

Succes
Gewijzigd op 15/01/2020 20:40:44 door j opla
 
Aad B

Aad B

15/01/2020 20:40:41
Quote Anchor link
Super, j opla en dank voor je reactie, ik ga ermee aan de slag. Wordt vervolgd :)
 
J opla

j opla

15/01/2020 20:42:01
Quote Anchor link
Let vooral op bij de breedte: zet #content {width : 100vw;}

Toevoeging op 15/01/2020 20:45:21:

Als je de "Developmenttools" of ontwikkelaarshulpmiddelen gebruikt in Firefox, kun je goed zien wat er gebeurd als je bepaalde instellingen aan past. Wel is het handig als de testpagina statisch zou zijn (nu worden de aanpassingen elke paar minuten weer overschreven).

Toevoeging op 15/01/2020 20:58:11:

PS. Ik zie dat je in je html ook nog opmaak hebt staan, zoals die zou ik er zoveel mogelijk uit slopen, dat maakt het alleen maar onoverzichtelijker. En inline style opmaak (dus in de html) overschrijft de opmaak die je in je .css file zet.



Toevoeging op 15/01/2020 21:12:38:

PPS bij het omdraaien van de CSS opbouw moet je in je media query ook omdraaien, voor schermen van < 600px heb je dan geen query, de volgende stap wordt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
@media screen and (min-width: 600px) {
Gewijzigd op 15/01/2020 21:13:08 door j opla
 
Aad B

Aad B

16/01/2020 21:15:43
Quote Anchor link
Dank, ik ben er mee bezig. Ook de inline style pak ik aan. Ben echt een newbee met style per apparaat. Verder is het ook maar hobby, ik probeer te leren. Ben druk bezig met wat IOT dingetjes zoals fijnstof meten. De testpagina bevat een refresh per 5 minuten maar haal ik er wel even uit om te testen. De data wijzigt in de database (MySQL en SQLite3) ook per 5 minuten vandaar die refresh. STaat in huis op een tablet aan.
 
J opla

j opla

16/01/2020 22:01:42
Quote Anchor link
Voor mij is het ook allemaal een hobby, maar ik ben blij dat ik je wat op weg kon helpen. Succes
 



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.