PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
Y

Select mobile site

Door Yoeri Achterbergen op 19-11-2015 16:04
3.243 views
Beste Leden,


Wat is de handigste en beste manier om onderscheid te maken tussen desktop en mobile site?
Nu heb ik iets kleins gemaakt en in de css gebruik gemaakt van

CSS


@media only screen and (max-device-width: 480px) {
body{
	background-color:#FF0000;
	font-family:arial;	
}
}


Echter ik werk op Apple en daar kun je in Safari aangeven "ontwikkelingsmodus" zodat je kan kijken hoe het in andere browsers uitziet.
Als ik dit doe met de code hierboven werkt het niet omdat het scherm natuurlijk groter is dan 480px.

Hoe doet bijvoorbeeld bol.com dat?

Kan iemand mij een tip hierin geven?


Gr. Yoeri
Thomas van den Heuvel
19-11-2015 16:06
Je kunt het window toch zelf wel resizen naar een dergelijke afmeting?
Y
Yoeri Achterbergen
19-11-2015 16:12
Beste Thomas,


Nou ik wil eigenlijk een onderscheid maken tussen desktop en mobile.
Voor mobiel wil ik een andere layout maken en functies veranderen tegen over de desktop site.
grote site's maken hier gebruik van en ik zou graag willen weten wat er nu gebeurt.

Ariën
19-11-2015 16:24
Er zijn twee mogelijkheden:
- Zorg voor een goede responsive werking van je site d.m.v. CSS, en eventueel het gebruik van een grid-column-systeem zoals Bootstrap.
- Een aparte layout maken, waarbij je rekening houdende met useragent bepaalt wie vanaf een mobile device surft. Het nadeel hiervan is dat je twee layouts moet onderhouden en dus extra werkt hebt.
- SanThe -
19-11-2015 16:26
Wat Thomas zegt werkt gewoon.
Ikzelf gebruik er gewoon een mobieltje bij om te kijken.
Y
Yoeri Achterbergen
19-11-2015 16:35
Beste Ariën,


Via Goolge kwam ik uit op een dynamische website, hierbij blijft de URL het zelfde alleen de layout verschild per apparaat/useragent.
Ze hebben het hier over een "vary header" alleen is er geen duidelijke uitleg, heb jij of iemand anders hier ervaring mee?
Marthijn Buijs
19-11-2015 16:39
Misschien moet je even de link geven waar je dat op zag.
Dan kunnen we wat daar staat beter uitleggen.
Ariën
19-11-2015 16:43
Dan gebruiken ze een useragent-detectie, om de layout te bepalen. Hier staat meet over de Vary-header. Ikzelf gebruik(te) in mijn eigen CMS deze class:
http://mobiledetect.net/

Werkt ook wel lekker, maar responsive-ness vind ik toch beter. Waarom zou je functies op je telefoon willen bieden die je niet op een desktop-pc heb, of andersom?
Y
Yoeri Achterbergen
19-11-2015 17:33
Ik heb dat van Google doorgelezen maar begrijp niet heel goed hoe ik die vary header goed in elkaar zet.


GET /page-1 HTTP/1.1
Host: webadres
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
Thomas van den Heuvel
19-11-2015 19:19
User agent detectie is toch terug in de tijd?

Was responsive webdesign niet juist bedoeld om de noodzaak om onderscheid te maken tussen verschillende browsers, devices en resoluties op te heffen?

Daarbij hielp het volgens mij ook enorm om "mobile first" te ontwikkelen. Als je je ontwerp zo niet hebt uitgebouwd is het mogelijk lastiger om deze met terugwerkende kracht mobiel-vriendelijk te maken. Maar dan moet je dus gewoon constateren dat het oorspronkelijke ontwerp hier niet op voorbereid was.

Reageren

Inloggen om te reageren