Select mobile site
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
Code (php)
1
2
3
4
5
6
2
3
4
5
6
@media only screen and (max-device-width: 480px) {
body{
background-color:#FF0000;
font-family:arial;
}
}
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
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.
- 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.
Ikzelf gebruik er gewoon een mobieltje bij om te kijken.
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?
Dan kunnen we wat daar staat beter uitleggen.
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?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
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...)
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...)
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.
Alleen werken zei met een andere URL
"m.facebook.com"
Wat ik wil is dezelfde URL maar 2 layouts.
Maar wil niet het onderscheid maken in de CSS dmv @media.
Op Google had ik het bovenstaande gevonden over de vary header alleen weet ik niet hoe het precies werkt en zou graag feedback willen van iemand die mij opweg zou kunnen helpen.
Met de useragent-detectie heb je al voldoende.
Om terug te komen op je oorspronkelijke vraag: als je dus een flexibel ontwerp hebt hoéf je dit onderscheid niet te maken.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
echo $_SERVER['HTTP_USER_AGENT'];
$browsertype = get_browser;
print_r($browsertype);
?>
echo $_SERVER['HTTP_USER_AGENT'];
$browsertype = get_browser;
print_r($browsertype);
?>
en dan met een if else statement de juiste begin pagina aanroepen?
Code (php)
Ik heb twee ontwerpen gemaakt, desktop en een mobiele.
Ik maak dit onderscheid zodat mensen beter kunnen navigeren op hun mobiel device.
De desktopsite is hier niet geschikt voor en daarnaast moet de mobiele site compacter zijn.
Aangezien ik met niet goed thuis ben in php en/of htacces zou ik graag met browserdetectie een zet in de goede richting willen krijgen.
Nogmaals, tegenwoordig heb je een gigantische hoeveelheid van en diversiteit in apparaten waarbij de grens tussen "desktop" en "mobile" heel erg vaag is geworden (of simpelweg niet meer bestaat).
In plaats van het inzetten op specifieke apparaten, browsers of resoluties is het vaak een veel beter idee om een set algemene regels te hanteren zodat het simpelweg niet meer uitmaakt op welk apparaat, in welke browser of op welke resolutie je een site bekijkt!
Met bovenstaande code-insteek pas je ook een soort van inversie van principes toe. Het zou niet uit mogen maken welke browser iemand gebruikt (laten we IE6 even vergeten ;)). Een browser volgt de standaarden, dus zolang je je website opzet volgens deze standaarden zou deze (in theorie) altijd correct moeten renderen.
Met de ontwikkelingen van browsers, CSS en responsive design ben je eindelijk (voor een groot deel) verlost van allerlei afhankelijkheden en nu wil je deze weer opnieuw introduceren? Liever niet!
@Yoeri in hoeverre wijkt deze "mobiele" (wanneer is iets trouwens "mobiel"?) site af van de "desktop" site? Vervullen deze twee echt verschillende taken of bieden ze (compleet) verschillende diensten? In dat geval is het misschien gerechtvaardigd om daar twee aparte sites voor te maken, of je zou zelfs kunnen overwegen om voor de mobiele variant een app te maken. Anders: responsive design is your friend.
get_browser() is bovendien ook niet op elk PHP-platform beschikbaar, dus zo'n class zal ik zeker aangrijpen.
Ik gebruik hem ook, maar RWD staat hier hoog op de lijst dat ik die class ga schrappen.
Maar weet iemand hoe grote webshops zoals bol.com en coolbleu en social media site Facebook dit doen?
Die maken een een smaller ontwerp, bijvoorbeeld webshops maken voor de mobiele site een schermgroot categorie menu.
Als je een user agent detectie hebt hoe implanteer ik dit dan goed op mijn site?
Als deze even smal is als op je telefoon, en hij ziet er hetzelfde uit... dan is het RWD
Als deze er anders uitziet... dan gebruiken ze een aparte site (en misschien een beetje RWD)
Yoeri Achterbergen op 20/11/2015 15:51:17:
Als je een user agent detectie hebt hoe implanteer ik dit dan goed op mijn site?
Het ligt er aan hoe je je site gebouwd hebt. Maar een template-parser zou niet overbodig zijn. In mijn geval gebruik ik (nog) Smarty als templateparser. Hiermee houd je je clientside code (HTML, CSS, JS) gescheiden van je PHP-code, en kan je met variabelen en functies je data en loops uit je PHP-code gebruiken.
Dat scheelt weer een hoop dubbele PHP-code.
In mijn geval schakel ik over naar een andere templateset als er een mobile device is.
Het nadeel is wel dat ik dan dus twee layouts sta te beheren.
Gewijzigd op 20/11/2015 16:01:03 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
echo "hello mobile";
}else{
echo "hello dekstop";
}
?>
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
echo "hello mobile";
}else{
echo "hello dekstop";
}
?>