Jump to content

Responsive maken met Java/PHP?


Visser23

Recommended Posts

Hallo!

Ik heb laatst een eigen website gemaakt, maar heb te horen gekregen op school dat zij graag willen zien dat ik de website responsive maak. Tuurlijk, heel erg handig. Dit moet ik echter laten zien in minimaal 100 regels php/javascript. Ik heb echter geen idee waar ik moet beginnen en hoe ik dit moet aanpakken. Heeft iemand tips?

Als je een bepaalde code nodig hebt, wil ik die hier uiteraard wel droppen. Website is dm-design.nl.

Link to comment
Delen op andere websites

Responsive maken met PHP is mogelijk door de HTTP headers te checken. HTTP headers zijn extra regels informatie die je browser meestuurt naar de server. Eén van die regels heet User-Agent en bevat informatie over de browser van een client die naar de server verbindt. Het is dus mogelijk om via PHP een andere stylesheet te includen in je pagina:

<!doctype html>
<html>
 <head>
   <?php
     $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
     if (preg_match("/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent)) || preg_match("/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent)) {
   ?>
   <link rel="stylesheet" type="text/css" href="/stylesheet_mobile.css" />
   <?php
     } else {
   ?>
   <link rel="stylesheet" type="text/css" href="/stylesheet.css" />
   <?php
     }
   ?>

   ...
 </head>

...

Het nadeel is dat dit statisch is, en de client de pagina moet verversen om een nieuwe stylesheet te krijgen.

Voor meer informatie hierover verwijs ik je door naar Stack Overflow (waar ik dit voorbeeld aan heb ontleend):


Natuurlijk verandert een mobieltje niet direct in een complete desktop, maar het volgende voorbeeld biedt wel betere mogelijkheden. Het is echter geen Javascript of PHP, dus je zult je docent even moeten vragen of dit wel mag (maar ik neem aan van wel).

HTML/CSS biedt al een tijd de mogelijkheid om media queries uit te voeren. Dit zijn kortweg regels die je opstelt zodat een browser (een) bepaalde stylesheet(s) voorgeschoteld krijgt. Zo kun je alleen mobiele browsers selecteren, of browsers/mobieltjes die een bepaalde paginabreedte hebben. Het voordeel van deze regels is dat ze direct worden toegepast zodra de browser verandert. Nog steeds geldt: een mobieltje wordt niet direct een desktop, maar een mobieltje kun je wél kantelen (portret en landschap). Dit kan handig zijn voor pagina's waar veel tekst op staat (die lees je graag in een portretformaat) of waar veel foto's op staan (landschapformaat).

Dit is mogelijk met behulp van de volgende regels:

<!doctype html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="stylesheet_screen.css" media="only screen" />
   <link rel="stylesheet" type="text/css" href="stylesheet_mobile.css" media="only screen and (max-device-width: 640px)" />

   ...
 </head>

...

Ook is het mogelijk om deze CSS queries in de stylesheet zelf uit te voeren.

Voor meer informatie hierover verwijs ik je naar de Mozilla Developer Network:

Bewerkt: door .Timothy
Link to comment
Delen op andere websites

Het eerste voorbeeld dat Timothy geeft is het omgekeerde van responsive design. In dat geval maak je meerdere versies van je website. Zoals hier bijvoorbeeld nog steeds (helaas) op het forum is. Ons forum is dus eigenlijk niet responsive aangezien het een losse mobiele skin heeft die aan de hand van een vergelijkbaar stukje PHP-code wordt geladen. Websites die meerdere versies hebben zijn dus geen (goed) responsive design.

Responsive design is juist dat je één versie van je website hebt en afhankelijk van hoe groot je je browser maakt of hoe groot je scherm is dat alles anders schaalt.

Voorbeelden hiervan zijn de websites van Geenstijl en Tweakers.net. Hoe kleiner je de browser maakt, hoe meer alles verspringt en herschaalt. Je hebt nog steeds exact dezelfde informatie en dezelfde website en het herladen van de browser is nooit vereist als je de resolutie van je scherm of browsergrootte aanpast.

Dit kan je dus doen met de uitleg/link die Big Boss over CSS geeft. Een oplossing met PHP raadt ik dus ten zeerste af. Beste is dus je CSS bestand zo te schrijven dat je rekening houdt met meerdere resoluties.

Grote voordeel is dat als je eenmaal een goed responsive design hebt dat je maar één website hoeft te onderhouden en dat wijzigingen direct voor alle apparaten zijn doorgevoerd. Geen geklooi meer dus met dubbel uploaden en dubbel publiceren.

Veel succes!

Link to comment
Delen op andere websites

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

Gast
Op dit onderwerp reageren...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...