Slechte weergave van HTML pagina op smartphone

[Brandts]

Hallo iedereen,

Ik ben deze week voor het eerst begonnen met het maken van een webpagina in html (zonder hulp van een "sitebuidler"). Ik werk met een html (index.html) pagina waarvan de opmaak uit een css bestand gehaald wordt (styles.css).

Tot nu toe lukt het aardig naar mijn idee, en reageert de webpagina (bijna) zoals ik zou verwachten. Als proef heb ik de pagina nu eens online gezet op http://members.ziggo.nl/hazenholletje/. In Chrome en Internet Explorer werkt de site goed maar ik heb wel een probleem als ik de site open op mijn smartphone (Android).

Op de smartphone kan ik zodra ik inzoom niet scrollen waardoor de site praktisch niet te bekijken is op een smartphone. Kan iemand mij uitleggen waar dit aan ligt?

Alvast bedankt,
Brandts

[Br3wmaster]

Je website is niet Responsive. Hij schaalt dus niet mee met de grote van je (mobiele)scherm. Je zou is kunnen kijken naar Bootstrap http://getbootstrap.com/.

Hele duidelijke documentantie en voor zo ver ik weet een hele gemakkelijke manier om je website op elk platform Responsive te krijgen.

Kleine side note, ik ben zelf ook nog een redelijke beginner op dit gebied dus als er een eenvoudigere oplossing is word ik uiteraard graag verbeterd

In ieder geval succes!

[Merethil]

Zelfs als je niet per sé responsive wilt gebruiken: Je HTML-element is slechts 8 pixels hoog, die groeit dus niet mee met de content. Aangezien scrollen op je telefoon over het hele HTML element gebeurt, niet over de losse elementen IN de HTML-tags, kan je dus niet horizontaal scrollen.

Als je je HTML en CSS zo opzet dat je HTML-object meegroeit met zijn inhoud zou je wel normaal heen en weer moeten kunnen scrollen. Een responsive website is natuurlijk nog beter, maar goed: Je begint net dus je zou het op beide manieren kunnen aanpakken. (Bedenk wel: Nu geleerd hoe responsive design werkt is later veel plezier van hebben ).

Edit: Ik gebruik zelf trouwens purecss.io om dingen responsive te bouwen, stuk compacter dan bijvoorbeeld Bootstrap. Maar met mediaqueries kan je de boel zelf helemaal naar je hand zetten zonder enige frameworks nodig te hebben: Ligt aan hoeveel tijd en moeite je erin wilt steken en vooral hoe makkelijk je het wilt maken. Zelf mediaqueries leren snappen is wel een stuk beter dan klakkeloos een framework erin plempen natuurlijk, maar dat terzijde

[ Voor 26% gewijzigd door Merethil op 22-01-2015 10:54 ]

[NMe]

Br3wmaster schreef op donderdag 22 januari 2015 @ 10:13:
Je website is niet Responsive. Hij schaalt dus niet mee met de grote van je (mobiele)scherm. Je zou is kunnen kijken naar Bootstrap http://getbootstrap.com/.

Je kan simpele sites ook prima responsive maken zonder bootstrap hoor...

[Br3wmaster]

NMe schreef op donderdag 22 januari 2015 @ 10:52:
[...]

Je kan simpele sites ook prima responsive maken zonder bootstrap hoor...

Dat geloof ik ook zeker! Zal google daar is even op los laten en mezelf is een beetje inlezen. Dank voor de trigger

[Brandts]

Bedankt voor de antwoorden, de term "responsive" kende ik nog niet (in de html wereld dan ). Hier zal ik zeker even naar kijken.

@NMe
Aangezien ik mijn site nogal als simpel beschouw, welke methode zou jij hiervoor gebruiken?

Edit: Ik denk dat deze voorbeelden me goed op weg kunnen helpen: http://www.w3schools.com/html/html_responsive.asp
Bedankt voor jullie hulp!

[ Voor 23% gewijzigd door Brandts op 22-01-2015 11:06 ]

[Anoniem: 525104]

probeer al je content in een width 960px te doen
momenteel werk ik aan een template, waar ik de banner enz wel op full width doe maar de content op 960px
als je vragen heb stuur me dan een pm, kan evt de site online gooien om je het te laten zien

Groetjes

[ Voor 67% gewijzigd door Anoniem: 525104 op 22-01-2015 11:51 ]

[NMe]

Brandts schreef op donderdag 22 januari 2015 @ 11:03:
@NMe
Aangezien ik mijn site nogal als simpel beschouw, welke methode zou jij hiervoor gebruiken?

[google=media queries]

Edit: Ik denk dat deze voorbeelden me goed op weg kunnen helpen: http://www.w3schools.com/html/html_responsive.asp
Bedankt voor jullie hulp!

Pas op met W3Schools. Die hebben geen goed track record wat betreft correctheid. Kijk liever gewoon op MDN.

Anoniem: 525104 schreef op donderdag 22 januari 2015 @ 11:49:
probeer al je content in een width 960px te doen

Dat is juist niet wat responsive inhoudt. Een goeie responsive site past zich aan naar het scherm waarop het getoond moet worden. Een site met een breedte van 960px is nog steeds redelijk waardeloos op een mobiele telefoon tenzij die toevallig full HD is. En zelfs dan nog is het in portrait vervelend lezen.

[ Voor 29% gewijzigd door NMe op 22-01-2015 12:25 ]

[Merethil]

Anoniem: 525104 schreef op donderdag 22 januari 2015 @ 11:49:
probeer al je content in een width 960px te doen
momenteel werk ik aan een template, waar ik de banner enz wel op full width doe maar de content op 960px
als je vragen heb stuur me dan een pm, kan evt de site online gooien om je het te laten zien

Groetjes

Een vaste breedte ergens op gooien is soms heel handig, maar om nou exact hetzelfde laten doen als wat jij nu doet.... Als de persoon in kwestie nou een andere breedte wil gebruiken, of een meeschalende website? Dit soort adviezen zijn leuk maar niet echt nuttig hiervoor imo, het komt namelijk over als "Je kan het alleen doen als je het zo en zo doet!"

[ Voor 5% gewijzigd door Merethil op 22-01-2015 12:26 ]

[Brandts]

Ik heb eens wat gelezen en geprobeerd met het responsive design en ik denk dat hiermee wel een nettere website te maken die geschikt is voor telefoons maar nu ik er meer van weet denk ik niet dat dit de oorzaak van mijn probleem is.

Om mijn probleem beter uit te leggen heb ik even een video gemaakt:
[YouTube: https://www.youtube.com/watch?v=EUNiP_2x8Zo]

Vanaf 6 seconden zie je dat ik wil sidescrollen. De scrollbalk beneden in het scherm beweegt wel mee maar de website zelf blijft staan. Hoe kan dit?

[Merethil]

Brandts schreef op donderdag 22 januari 2015 @ 12:55:
Ik heb eens wat gelezen en geprobeerd met het responsive design en ik denk dat hiermee wel een nettere website te maken die geschikt is voor telefoons maar nu ik er meer van weet denk ik niet dat dit de oorzaak van mijn probleem is.

Om mijn probleem beter uit te leggen heb ik even een video gemaakt:
[video]

Vanaf 6 seconden zie je dat ik wil sidescrollen. De scrollbalk beneden in het scherm beweegt wel mee maar de website zelf blijft staan. Hoe kan dit?

Hier heb ik je al antwoord op gegeven, zie mijn bericht van 10:46:

Zelfs als je niet per sé responsive wilt gebruiken: Je HTML-element is slechts 8 pixels hoog, die groeit dus niet mee met de content. Aangezien scrollen op je telefoon over het hele HTML element gebeurt, niet over de losse elementen IN de HTML-tags, kan je dus niet horizontaal scrollen.

[Brandts]

Sorry voor mijn onkunde in HTML maar ik begrijp niet waar je uit bepaalt dat mijn html element maar 8 pixels hoog is.

Naar mijn weten is hij 427 pixels

[Merethil]

Brandts schreef op donderdag 22 januari 2015 @ 13:13:
Sorry voor mijn onkunde in HTML maar ik begrijp niet waar je uit bepaalt dat mijn html element maar 8 pixels hoog is.

Naar mijn weten is hij 427 pixels

[afbeelding]

Bij mij niet:



Welke versie van Chrome gebruik je? Kans is dat die op je Android device een hogere versie is of anders omgaat met de HTML die je hem biedt.

[Brandts]

Vreemd, op mijn pc staat in ieder geval versie 39.0.2171.99 en op mijn telefoon versie 39.0.2171.93.

Ik zal vanavond thuis eens kijken of ik het html-element een bepaalde hoogte kan opleggen en of dit het probleem oplost. Dan weet ik in ieder geval of het daar aan ligt.

[ToFast]

Bootstrap is hier al genoemd. Ik heb zelf een beetje ervaring met het Foundation Framework. Wellicht dat je hier iets aan hebt, daar kan je ook mooi responsive mee werken.

[Brandts]

Bedankt, ik zal er zeker even naar kijken.

Maar op dit moment ben ik er nog niet achter wat mijn probleem uit de post van 12:55 veroorzaakt. Zoals Merethil al aangeeft heeft het waarschijnlijk met het html-element te maken dat bij hem maar 8 pixels hoog is. Het vreemde is dat dit mijn mijn browser niet het geval is.

Ik wil dit graag eerst oplossen en de site afmaken zodat hij in gebruik genomen kan worden. Daarna ga ik me focussen op een responsive design.

[Shineless]

Brandts schreef op donderdag 22 januari 2015 @ 13:13:
Sorry voor mijn onkunde in HTML maar ik begrijp niet waar je uit bepaalt dat mijn html element maar 8 pixels hoog is.

Naar mijn weten is hij 427 pixels

[afbeelding]

Dat de hoogte bij jou 427 pixels is vind ik heel erg raar.
De "wrapper" div heeft namelijk een fixed position, waardoor deze niet meer in de normale flow zit:

The document and other elements behave like the fixed positioned element does not exist

Dat het niet werkt vind ik trouwens ook niet zo raar, aangezien een fixed position er precies voor is gemaakt om op z'n plek te blijven terwijl je de pagina scrolt.

Dit betekend dat het "body" element (en daardoor ook het "html" element) niet om de fixed div heen kunnen wrappen.
Beste oplossing zou zijn (en dat is een goede tip over het algemeen) om "position: fixed" niet te gebruiken.

Verder, wat betreft responsive design zou ik je zeker willen aanraden om dat toe te passen. Hoe sneller hoe beter. Zelf heb ik ervaring met allebei de frameworks die hier worden genoemd (foundation zurb en bootstrap) en die werken allebei erg goed.
Bootstrap is wat uitgebreider dan foundation en wordt ook breder gedragen dan foundation, dus als het jou niet uitmaakt zou ik je aanraden om met bootstrap te beginnen.
Zelf media queries schrijven kan natuurlijk ook, maar ik denk dat beginnen met bootstrap wat makkelijker is.

[ Voor 5% gewijzigd door Shineless op 22-01-2015 14:56 . Reden: Verduidelijking fixed position ]

[NMe]

Shineless schreef op donderdag 22 januari 2015 @ 14:36:
[...]

Dat de hoogte bij jou 427 pixels is vind ik heel erg raar.
De "wrapper" div heeft namelijk een fixed position, waardoor deze niet meer in de normale flow zit:

Dat is waarschijnlijk meteen ook het probleem van Brandts waardoor het scrollen niet goed werkt. Fixed positions on mobile gaan niet goed samen.

[Rann]

NMe schreef op donderdag 22 januari 2015 @ 14:48:
[...]

Dat is waarschijnlijk meteen ook het probleem van Brandts waardoor het scrollen niet goed werkt. Fixed positions on mobile gaan niet goed samen.

Dit inderdaad, met fixed kun je vaak niet scrollen, of het geeft andere problemen op mobiel. In theorie heb je position:fixed ook niet nodig voor je content.

Maak in #wrapper, de position absolute in plaats van fixed. Zal je probleem waarschijnlijk oplossen.

Een andere manier om je content in het midden uit te lijnen, automatisch ;-):

code:

#wrapper {
position: relative;
/* left: 50%; */
width: 1024px;
/* margin-left: -512px; */
margin: 0 auto;

[ Voor 27% gewijzigd door Rann op 22-01-2015 14:56 ]

[Brandts]

@Shineless, @NMe en @Rann

Dan zal het dit inderdaad wel zijn. Ik dacht dat ik dit er al uit had gehaald maar blijkbaar is er iets misgegaan bij de aanmaak van styles.css. De webpagina gebruikt "Styles.css" terwijl ik de aanpassing heb ge-upload naar "styles.css" (hoofdlettertje verschil). Nu ik weet waar het probleem zit vermoed ik dat ik er wel uit kom (helaas kan ik het vanavond pas uitproberen). Nogmaals bedankt voor de hulp.

Rann schreef op donderdag 22 januari 2015 @ 14:54:
[...]
Een andere manier om je content in het midden uit te lijnen, automatisch ;-):

code:

#wrapper {
position: relative;
/* left: 50%; */
width: 1024px;
/* margin-left: -512px; */
margin: 0 auto;

Zoiets zit dus al in "styles.css" (met een kleine letter dus)

@Shineless
De site wordt voor mijn vriendin die als gastouder wil beginnen. Hiervoor geldt hoe sneller de site online staat, hoe beter Aangezien responsive design compleet nieuw voor mij is en HTML minder nieuw maak ik de site liever eerst af op deze manier. Daar ga ik me eens focussen op Bootstrap. Bedankt voor de tip.

[ Voor 48% gewijzigd door Brandts op 22-01-2015 15:07 ]

[Caelorum]

NMe schreef op donderdag 22 januari 2015 @ 14:48:
[...]
Dat is waarschijnlijk meteen ook het probleem van Brandts waardoor het scrollen niet goed werkt. Fixed positions on mobile gaan niet goed samen.

Het ligt ook wel een beetje aan de browser. IE in WP8 heeft er duidelijk geen boodschap aan, want daar deed alles het gewoon. Maar ik merk op het werk wel vaker dat Windows Phone's IE het vaak beter doet doordat het random dingen negeert om een pagina alsnog werkend te krijgen. (al geeft dat heel soms ook wel heel vervelende problemen).

@Brandts, als je een Windows server gebruikt maakt hoofdletters niets uit. Ja, tenzij je dat aanzet. Bij linux based servers moet je daar uiteraard wel rekening mee houden.

Verder hoef je niet meteen Bootstrap te gebruiken voor responsive design. Het is maar een van de vele frameworks om het eenvoudiger te maken. Een mooi startpunt om te beginnen is wellicht: MDN: Responsive Web design (google cache, want lijkt er momenteel uit te liggen?)

[NMe]

Mja, ik word ook altijd een beetje moe van die mensen die voor simpele problemen meteen met complete frameworks beginnen te smijten. De topicstarter is hier met twee of drie mediaspecifieke stukjes CSS ook klaar, daar wil je toch niet compleet bootstrap voor toevoegen?

[Brandts]

Ik zal het tegen die tijd allemaal meenemen. Ik ben zelf ook voorstander van oplossingen die zo eenvoudig mogelijk zijn (vandaar dat ik voor deze site ben overgestapt naar het zelf schrijven van HTML).

@Caelorum
Ik heb geen idee of Ziggo voor hun webserver een Windows server gebruikt. Als ik met Chrome via "element inspecteren" de hoofdletter van "Styles.css" vervang door een kleine letter wordt er in ieder geval het juiste bestand ingelezen. Ook in de directory is te zien dat beide bestanden bestaan, ik ga er dus maar vanuit dat de server niet op Windows draait.

[Martinspire]

Als je bij je #wrapper eens dit neerzet:

code:

#wrapper {
width: 1024px;
margin: 0 auto;
}

Dan staat je site toch in het midden en heb je geen position fixed nodig.

Wat je namelijk met position:fixed doet is dat het element altijd blijft staan waar je het positioneert. Dus ongeacht scrollen.

Verder is je site inderdaad niet responsive. Dit kun je oplossen door media queries te gebruiken, maar daar heb je weinig aan totdat je een meta-tag toevoegt:

code:

<meta name="viewport" content="width=device-width">

Meer info hier: https://developer.mozilla.../Mobile/Viewport_meta_tag

Overigens kun je in Chrome het volgende doen om de weergave zoals Android te simuleren:

• Open de developer-tools.
• Klik op het mobieltje linksbovenin de werkbalk van developer-tools (het mobiel-icoontje) (dit zie je ook in de screenshot van je trouwens)
• Selecteer vervolgens een device, bijvoorbeeld een Nexus 5

Wat overigens ook problemen gaat leveren denk ik

code:

#section {
float: left;
}

Dit zorgt ervoor dat je het element relatief gaat maken van diens container waardoor de posities van overige elementen niet meer correct worden weergegeven.

Ik denk dat het slim is om even opnieuw te kijken naar wat je wilt doen en dan te bepalen welke structuur je daarvoor moet gebruiken. Als alle elementen onder elkaar staan hoef je in principe niets te floaten. En ook een fixed-navigatie lijkt me niet nodig.
Misschien dat je zelfs even terug moet gaan naar wat tutorials (of pak een video-tutorial).

Een framework als Bootstrap (al prefereer ik zelf Foundation vanwege het logischere taalgebruik: http://foundation.zurb.com) kan je helpen, maar dan moet je nog steeds even bedenken wat je wel en niet wilt zien in welk formaat op welk platform. Even wat dingen op papier schetsen kan daarbij helpen. Zeker als je net begint.

Een handige lijst voor meer informatie, tutorials en tips kun je overigens hier vinden: https://github.com/diegocard/awesome-html5

[ Voor 8% gewijzigd door Martinspire op 22-01-2015 16:01 ]

[Brandts]

Bedankt voor de vele informatie. Dat je Android kunt simuleren in Chrome is compleet nieuw voor mij. Ik vroeg me al af waarom het screenshot van Merethil er zo anders uit zag Nu ik het CSS bestand aangepast heb werkt de site inderdaad (bijna) zoals ik verwacht.

Ik kan in ieder geval weer verder. Iedereen bedankt voor de hulp en.de info.

[Br3wmaster]

NMe schreef op donderdag 22 januari 2015 @ 15:27:
Mja, ik word ook altijd een beetje moe van die mensen die voor simpele problemen meteen met complete frameworks beginnen te smijten. De topicstarter is hier met twee of drie mediaspecifieke stukjes CSS ook klaar, daar wil je toch niet compleet bootstrap voor toevoegen?

Om nog even dit topic te kapen . Nme bedankt voor je info over media queries. Heb me er gister in verdiept en dat scheelt inderdaad een hoop bootstrap . Nogmaals bedankt!

[incaz]

Martinspire schreef op donderdag 22 januari 2015 @ 15:59:
Als je bij je #wrapper eens dit neerzet:

code:

#wrapper {
width: 1024px;
margin: 0 auto;
}

Dan staat je site toch in het midden en heb je geen position fixed nodig.

Daar kun je dan beter een max-width van maken (of combineren met een max-width: 100%) - past het ook op smallere schermen, zoals tablets en niet maximized windows.

[Brandts]

Bedankt voor jullie reacties. De site is inmiddels aangepast: http://www.hazenholletje.nl/. Nu de content nog toevoegen.

Ik heb wel nog een vraag over het centreren van de navigatieknoppen. Nu heb ik de volgende code gebruikt:

code:

#nav{
    background-color:#2FBB5C;
    height:40px;
    width:1024px;
    padding:0px; 
    margin: 0 auto;
}

#itemwrapper{
    margin: 0 auto;
    width:70%;
    display:flex;
    height: 40px;
}

#menuitem {
    margin: 0 auto ;
    float:left;
    background-color:#2FBB5C;
    height:33px;
    padding-left: 20px;
    padding-right: 20px; 
    padding-top: 7px;
    font-size:20px;
    display: inline-block;
    vertical-align: middle;
    justify-content:space-around;
}

Ik vermoed dat de "width:70%:" in de itemwrapper voor problemen gaat zorgen maar als ik hem niet gebruiken komen de knoppen te ver uit elkaar te staan. Nu had ik nog wel een andere oplossing om de knoppen te centreren maar die werkt alleen als de knoppen een gedefinieerde "width" hebben. Heeft iemand hier een oplossing voor?

[incaz]

Versimpelen

Cascading Stylesheet:

#nav{
    background-color:#2FBB5C;
    height:40px;
   /* width:1024px;*/ /* weg */
    padding:0px; 
    margin: 0 auto;
}

#itemwrapper{
    margin: 0 auto;
/*    width:70%;
    display:flex; */ /* weg */
    height: 40px;
    text-align: center; /* nieuw */
}

#menuitem {
    /*margin: 0 auto ;
    float:left;*/ /* weg */
    background-color:#2FBB5C;
    height:33px;
    padding-left: 20px;
    padding-right: 20px; 
    padding-top: 7px;
    font-size:20px;
    display: inline-block;
    vertical-align: middle; 
 /*   justify-content:space-around;*/ /* weg */
}

[Martinspire]

Mja die display flex haal je nu ook ineens weer ergens vandaan. Lijkt me voor zoiets ook niet echt nodig.

incaz schreef op vrijdag 23 januari 2015 @ 11:40:
[...]


Daar kun je dan beter een max-width van maken (of combineren met een max-width: 100%) - past het ook op smallere schermen, zoals tablets en niet maximized windows.

True, maar hij wilde volgens mij liever scrollen, dus daarom had ik het laten staan. Gezien zijn header-logo ook 1024px was...
Sowieso vraag ik me af of je wel een width nodig hebt op de divs en dat niet met beter automatisch kunt laten.

[incaz]

Martinspire schreef op vrijdag 23 januari 2015 @ 14:04:
Sowieso vraag ik me af of je wel een width nodig hebt op de divs en dat niet met beter automatisch kunt laten.

Dat is altijd de vraag, hoe minder hoe beter meestal. Maar een max-width op een text-div / op de main is niet gek. Op een bepaald moment lezen de regels niet meer prettig

[Brandts]

@Incaz
Bedankt voor je code. Achteraf denk ik, hoe simpel kan het zijn. Door de verschillende oplossingen die ik met google gevonden heb is er inderdaad meer code komen te staan dan nodig is. Het wordt tijd om eens op te ruimen

Op dit moment heb ik een plaatje van 1024px breed in de header staan. Het idee is inderdaad dat de rest van de pagina deze breedte volgt. Dat er gescrollt moet worden is even geen probleem. Het belangrijkste voor mijn viendin is nu dat ze pagina in gebruik kan gaan nemen.

Zodra zij tevreden is kan ik wat meer gaan spelen met een responsive design en dergelijke. Dan kan ik me zelf ook wat meer tijd nemen om me overal in te verdiepen want ik merk dat ik nog een hoop te leren heb

[incaz]

Even gespiekt, maar die banner kan wel vrij makkelijk worden aangepast. Je kunt een afbeelding uberhaupt makkelijk schalen met img{ max-width: 100%; height: auto }

Een alternatief is het opsplitsen van de tekst en de achtergrond (heuveltje/zonnetje): je kunt dan de tekst boven de achtergrond laten zweven, of het heuveltje een stuk kleiner maken, terwijl je de tekst groter houdt. Google ook op de 'sliding doors' techniek want ook die kan misschien uitkomst bieden om de header schaalbaar te maken.

Horizontaal scrollen is echt zo afschuwelijk, dat zou ik niet doen hoor, zeker niet alleen maar voor de header. Of tenminste: zorg in elk geval dat de tekst netjes binnen het venster blijft. Want lezen terwijl je heen en weer moet scrollen is wel echt een afknapper.

[Gerard X]

De informatie van dit onderwerp is inmiddels al weer 8 jaar oud! Ik ben benieuwd naar de huidige stand van zaken oftewel hoe het momenteel mogelijk is om een reeds gemaakte website op een eenvoudige manier geschikt te maken voor van PC's afwijkende beeldschermformaten. Bijvoorbeeld door 1 CSS-stijl of een bepaald 'script' - iets in de geest van "als ... dan ...", maar eigenlijk zou ik verwachten dat 'browsers' inmiddels het nodige (kunnen) aanpassen zoals ze ook steeds met nieuwe CSS-stijlen overweg konden/kunnen.

Na het schrijven van het bovenstaand vond ik dit:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dit zou in het "head"-deel moeten komen. Zou dat alles zijn?

[ Voor 50% gewijzigd door Gerard X op 24-08-2023 05:59 ]

[RobIII]

Het is niet dat met één magisch regeltje opeens alles "opgelost" is. Maar we gaan daar ook geen 8 jaar ouwe koei voor uit de sloot trekken. Open even je eigen tooic aub.