Browser detectie

Door Chris PHP op 01-05-2014 07:58

2.889 views

Heren,

Hoe doen jullie browser detectie? En dan bedoel ik voornameijk mobiele browser detectie, zodat er een juist css sheet geladen kan worden. Tijdens de ontwikkeling gebruikte ik browscap.ini en dan de get_browser() functie. Hier kun je veel mee uitlezen en wordt allemaal server side gedaan, echter ondersteunt mijn hosting provider dit niet en gaat het ook niet doen.

Het liefste zou ik dit zonder JS doen, is er een makkelijke methode om de juiste browser te kiezen? Uiteraard kun je $_SERVER['HTTP_USER_AGENT'] gebruiken maar dan zou ik dit eerst op alle mobiele devices moeten doen, zodat ik de juiste waardes heb.

Wat gebruiken jullie om een mobiel apparaat te herkennen?

M M B

01-05-2014 08:37

Zelf gebruik ik altijd http://mobiledetect.net/

Wouter J

01-05-2014 09:40

Voor het laden van de juiste stylesheet moet je dit niet gebruiken. Daar heeft CSS Media Queries voor uitgevonden.

TJVB tvb

01-05-2014 10:02

Voor browscap is er ook een losse php class die geen instellingen van je hosting provider nodig heeft
https://github.com/GaretJax/phpbrowscap/

Chris PHP

01-05-2014 11:22 gewijzigd op 01-05-2014 11:23

@TJVB ooh thnx! Ik zal daar eens naar kijken (ook voor andere doeleinden).

@Wouter,
Daar heb ik ook aan gedacht maar iPhone negeerd de 'handheld' waarde, dus dat is geen optie.

Voorbeeld

width: 600px;
@media handheld { width: 300px; }

Ik heb wel een @media min-device-width en min-device-height gevonden maar dan moet je dus per device weten wat te waardes zijn.

Voorbeeld


/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

Wouter J

01-05-2014 11:52

Chris, je kunt beter je site stylen op breakpoints dan specifieke devices targetten. Verklein je scherm en zie wanneer je design helemaal fout gaat, pak dan die resolutie om de dingen die fout gaan te fixen. Verklein hem dan weer totdat het mis gaat, gebruik dan weer die resolutie, etc.

Chris PHP

01-05-2014 12:21

Het enige probleem wat ik nu heb voor deze site is dat hij landscape ontworpen is, op pc's zien deze er goed uit. Echter via mobiele apparaten valt 1/4 van de pagina weg.

Wanneer het de centreer opties eruit haal is het probleem weg, ik gebruik de volgende methode voor centeren.


position: absolute;
left: 50%;
margin-left: -600px;
width: 1200px;

Wouter J

01-05-2014 12:35

Hehe, dat is ook een verkeerde centreer methode. Kijk eens naar http://d-graff.de/fricca/center.html Op die manier heb je het hele probleem niet.

En als je toch deze methode behoudt dan ligt je breakpoint dus bij width:1200px. Alles daarboven gaat goed, alles daaronder gaat fout. Dan krijg je dus iets als:
[code lang=css]@media screen and (max-width:1200px) {
.page{
position:static;
left:auto;
margin-left:auto;
width:100%; /* I hate horizontal scrolling ;-) */
}
}[/code]

Chris PHP

01-05-2014 12:42

@Wouter,

Dat voorbeeld ziet er goed uit, maar ik zie daar geen voorbeeldcode bij.

De pagina moet 1200px blijven, dus dat is een waarde die niet gewijzigd kan worden.

Reageren

Inloggen om te reageren