login  Naam:   Wachtwoord: 
Registreer je!
 Forum

mobiele website zonder scrollbars (Opgelost)

Offline anton - 22/05/2013 23:57
Avatar van antonLid Hallo iedereen!

Ik ben momenteel bezig met een website die responsive is naar mobiele devices toe. De site werkt juist op de pc, namelijk ik wil dat er absoluut geen scrollbars aanwezig zijn. welke browser men ook gebruikt... Voor de pc doe ik dit via javascript om de echte beschikbare hoogte te berekenen en op basis daarvan mijn website te doen passen.

Dit javascriptje werkt echter niet zo heel goed op mobiele devices...
Het werkt wel, maar ook weer niet, ik leg het even uit.

De pagina wordt helemaal juist berekend, maar om een of andere reden rekent het script op mobiele devices de toolbars niet mee... Op het moment dat de toolbars verdwijnen past de website perfect, mar vanaf ze er weer staan krijg ik een heel kleine scroll area die de exacte hoogte van de toolbar heeft.

Ik heb al veel opgezocht over responsive designs en javascript op mobiele devices, alsook over wat nu best is, procentuele maten gebruiken of ze resizen met pixels op basis van de schermgrootte , hier ben ik al uitgekomen dat een combinatie het beste werkt. Toch doet de scaling het niet perfect hoe ik het wil.

Mijn doel is eigenlijk om een soort van windows 8 metro style design te gebruiken zodat het lijkt dat de gebruiker op een app zit in plaats van op een website, dus scrollbars zijn niet gewenst... Effectief een app maken is ook niet echt een optie aangezien de site daarvoor niet genoeg bekeken wordt.

Is wat ik vraag uberhaupt mogelijk of verwacht ik teveel?

By the way, ik heb ook gemerkt dat het van browser tot browser afhangt, in safari op mijn tablet bijvoorbeeld krijg ik de website zo goed als juist, terwijl bij google chrome op de tablet de scrollbar een pak groter is...

Als dit niet mogelijk is , zeg het me dan meteen, maar als er hoop is, ookal is het maar een klein beetje, alsjeblieft geef tutorials, referenties links, daar ben ik al veel mee...

Mijn research heeft echter nog niet heel veel opgeleverd...

Alvast bedankt!
Met vriendelijke groeten
Anton Vandeghinste

5 antwoorden

Gesponsorde links
Offline vinTage - 23/05/2013 00:51 (laatste wijziging 23/05/2013 00:51)
Avatar van vinTage Nieuw lid Je kunt met mediaqueries (en zonder javascript) perfect bekomen wat jij voor ogen hebt!

Via een addon ofzo voor je browser (waarmee je devved) houd je de breedte van je scherm in de gaten tijdens het resizen, als er op een gegeven moment iets verdwijnt (scrollbar komt), dan gebruik je de afgelezen positie van de breedte aan (evt een pixel of procentje als reserve inbouwen), om een nieuwe mediaquerie te maken.

edit: Natuurlijk is een css reset een must
Offline Martijn - 23/05/2013 11:29
Avatar van Martijn Crew PHP OP een mobiel waar de body groter is dan de schermgrootte, komt er alleen tijdens het scrollen een scrollbar, verder niet. Moet je ook niet willen aanpassen (tenzij je er een goede reden voor hebt). De userinterface is met een bepaalde gedachte gemaakt en mensen zijn deze ook gewent. Als jij opeens iets anders forceert, raken mensen gefrustreerd.
Offline anton - 24/05/2013 13:39 (laatste wijziging 24/05/2013 13:41)
Avatar van anton Lid @VinTage

Ik werk met mediaqueries om het mobiel te krijgen, al veel research over gedaan, toch krijg ik niet exact wat ik wens. Ik zal in een volgende post een link zetten met mijn css code.

Btw.: wat bedoel je met "een css reset"?

@Martijn

Ik weet dat er enkel dan een scrollbar komt, dat is ook het probleem niet, ik wil gewoon niet dat de user moet scrollen... dat de webpagina een soort van perfectfit voor de beschikbare ruimte is (dus de screensize zonder eventuele toolbars en taskbars)

Beide bedankt voor jullie antwoord, ik begin me te realiseren dat wat ik wil niet mogelijk is (toch niet op elke browser en elk platform). Ik laat deze post nog even open zodat ik eventueel nog verdere feedback kan krijgen.


edit: hier is mijn css:

http://pastebin.com/Bviz9fmy

De hoogtes van 10px van de html was eerst 100% maar met dat ik dan met javascript wat aan het fiksen was , staat het op 10px, ik laat het voorlopig ook zo omdat ik nu het dichtst in de buurt ben van wat ik al geprobeerd heb.

Groetjes
Anton
Offline Martijn - 24/05/2013 16:29
Avatar van Martijn Crew PHP <meta name="viewport" content="width=device-width, height=device-height;" />

Dan in je head. Daar zou je dan makkelijker waardes uit je body/html mee moeten kunnen halen.
Bedankt door: UpLink, anton
Offline anton - 28/05/2013 10:51
Avatar van anton Lid Dankjewel Martijn! ik had die meta al staan, maar enkel met width=device-width.

Vrij dom dat ik nog niet had nagedacht om er height=device-height bij te zetten.

Heel erg bedankt!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.163s