Mobiele site script

Status
Niet open voor verdere reacties.
L

luk4s

Gebruiker
Lid geworden
2 jul 2014
Berichten
5
Hallo allemaal,

Ik wil een mobiele site maken en ik heb de css al gemaakt. Hoe kan ik zorgen dat als iemand met zijn pc de website bezoekt hij de normale site krijgt, en dat als hij met een mobiel de site bezoekt dat hij dan de site te zien krijgt met de mobiele css code.

Alvast bedankt
 
Ik heb een aantal codes geprobeerd. Op m'n iPhone werkt het maar op andere telefoons niet. Dit snap ik dus niet helemaal. Ook is de css nog niet helemaal goed maar ik ben er mee bezig. Als je de voortgang wilt bekijken kan dat op: http://tech-forum.nl/
 
Goedenavond,

Wat je natuurlijk ook kan doen (wat ik wel eens gebruik) is jQuery mobile. Hier mee kan je opzich makkelijk een mobile website oprichten. Het vraagt wel een beetje leerwerk maar, dan heb je ook wat!
 
Er is geen enkele manier om in een website (bijvoorbeeld via scripting) de fysieke display grootte te detecteren.

Een workaround kan zijn... het redirecten met een Detect-Mobile script. Voordeel is een goede detectie van veel mobile modellen, zowel phones als tablets. Nadeel is dat een detectie script niet up-to-date blijft omdat er steeds nieuwe mobiles op de markt komen.

Je kunt ook gebruik maken van @media met als voordeel dat er geen scripting nodig is en de implementatie niet lastig is. Nadeel is dat ook dit niet future-proof is omdat een full hd tablet van 10 inch (mobile)dezelfde resolutie heeft als een full hd monitor van 24 inch (desktop).
 
Laatst bewerkt:
Redirecten naar een mobiele site is nooit een goed idee. Gewoon je site zo mooi in elkaar zetten dat het responsive is.
Daarbij helpt de link die thomasb plaatste nogal :) die zorgt er namelijk voor dat je de breedte van het apparaat kan detecteren en daar vervolgens apart css voor toepassen. Aparte mobiele sites zijn eerlijk gezegd nogal uit de mode aan het raken.... ;)

Voorbeeldje:
PHP: 
@media all and (max-width:777px) { /* alle css hier word uitgevoerd op schermen smaller dan 777px */ }

Het eerste wat je doet is eigenlijk de site volledig voor de Desktop bouwen, (wel met in je achterhoofd dat het ook moet kunnen vouwen)
en dan ga je met css aan de gang om de styling aan te passen voor kleinere schermen d.m.v. het soort codes die ik hierboven heb gezet.
 
Een ander concept dat je nog weinig ziet maar wel interessant is:

1. Begin met een ontwerp voor lage resoluties.
2. Kijk bij welke breedte het er niet meer mooi uit ziet en zet de @media op die breedte.
3. Pas de stylesheet aan bij deze @media zodat de layout weer oke is.
Herhaal stap 2 en 3....

Met andere woorden, je hoeft dan niet meer na te denken over welke (idiote) resoluties in de toekomst gaan komen. Het concept is future proof, vermoed ik. Ik gebruik het zelf nog niet maar heb er wel een en ander over gelezen en ga het toch eens proberen.

Oja, het ontwerp moet natuurlijk wel dusdanig zijn dat er niet veel @meida's gaan komen, dat schiet niet op

Have fun.
 
Bedankt! Het nadeel is alleen, als ik in de css ga rommelen is dat veel werk. Het gaat namelijk om een smf site en daar zit veel css in. Ik ga m'n best doen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan