Mobility Blog

Mobility Blog

Meningen op deze blog weerspiegelen de opvattingen van de schrijver en niet per definitie die van de Capgemini Group

Je website op een iPhone met JavaScript en CSS

Categorie: Mobile Development
De meeste website die we bezoeken zijn tegenwoordig goed te lezen op een iPhone. Mobiele apparaten hebben de wereld veroverd en websites worden steeds meer vanuit mobiele apparaten bezocht.
Toch zijn er nog redelijk wat websites die nog geen mobiele versie hebben. En dat is zonde, want of je nou een bestaande site omzet of een nieuwe site maakt, je kan heel simpel met behulp van JavaScript en CSS detecteren of je pagina bezocht wordt vanaf een PC, een tablet of een mobiel apparaat en de weergave daar op aanpassen.

In deze blogpost zal ik laten zien hoe gemakkelijk het is om je webpagina te laten detecteren dat die met een iPhone bezocht wordt, en daar de lay-out van de pagina op aan te passen. Ik zal hier niet in gaan op welke design principes gebruikt kunnen worden voor het ontwerpen van een site voor een iPhone. Dat is een onderwerp voor een andere keer.

We beginnen met een simpele standaard website. De standaard componenten zijn aanwezig, zoals een JavaScript en CSS bestand.

De header van je HTML bestand ziet er zo uit:

<head>
    <title>Welkom op mijn website</title>
    <link href="Content/default.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/default.js"></script>
</head>

Detecteren van een iPhone

Het eerste wat je moet doen, is detecteren dat je met een iPhone te maken hebt.
Dat kan op verschillende manieren.

De eerste methode is door in je CSS bestand een stijl toe te voegen welke specifiek voor kleine schermen is:

@media only screen and (max-width: 480px) {
   /* CSS voor mobiel hier */
}

Hier stel je in dat alleen media voor een scherm met een maximale breedte van 480 pixels de CSS code mag gebruiken. In dit gedeelte kan je vervolgens al je code neerzetten om je pagina de vorm te laten aannemen die jij wilt.
Het voordeel is dat je nu meteen alle mobiele apparaten momenteel op de markt te pakken hebt en daar één stuk specifieke CSS code voor kan maken. Mocht er een telefoon uitgebracht worden met een scherm breedte groter dan 480 pixels, dan zal deze echter niet de mobiele layout van je site weegeven.
 
Een andere manier, om je layout specifiek op één telefoon aan te passen, is met een stukje JavaScript in je HTML bestand:

<script type="text/javascript">
    if (navigator.userAgent.match(/iPhone/i)) {
            document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"Content/iphone.css\" charset=\"utf-8\" \/>");
            document.write("<meta name=\"viewport\" content=\"initial-scale=1.0,maximum-scale=1.0\" \/>");
    }
    else {
        document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"Content/default.css\" \/>");
    }
</script>

Het script wat je hier invoert kijkt in de user agent of het om een iPhone gaat. Indien dat zo is, wordt iphone.css geladen en wordt er ingesteld dat er niet in-of-uigezoomd kan worden. Mocht het geen iPhone zijn, dan wordt de standaard stylesheet geladen.
Het ziet er wat rommeliger uit, maar het voordeel is dat je nu een compleet CSS bestand kan wijden aan specifiek de iPhone. In dit artikel gaan we verder met deze optie.
Er zijn nog meerdere manieren om het op te lossen, maar de twee die hierboven beschreven zijn genieten mijn voorkeur.

Opmaak van de pagina

Vervolgens geeft je in iphone.css aan wat je precies wilt met de opmaak. Als dat klaar is heb je met dezelfde website, maar een ander CSS bestand, het volgende resultaat:


iphone.css ziet er als volgt uit:

body {
       padding: 0px;
       margin: 0px;
       color: #4c566c;
       text-shadow: 0px 1px -1px #fff;
       text-align: center;
       font: normal 15px Arial;
}
 
header h1 {
       background-image: -webkit-gradient(linear, left top, left bottom, from(#98CEE6), color-stop( 50%, #32B6DB), color-stop(50%, #01AED6), to(#0095CB));
       margin: 0px;
       height: 34px;
       color: white;
       font-size: 22px;
       text-align: center;
       text-shadow: 0px -1px 1px #000;
       border-bottom: 1px solid black;
       padding: 8px 0px 0px 0px;
}
 
h1 {
    color: #0095CB;
}
 
p{
       margin: 1em;
}
img {
    width: 100%;
}
 
article {
       background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#BBBBBB));
    padding: 10px 0px 10px 0px;
}
 
footer {
    background-color: #32B6DB;
    color: white;
    padding: 10px 0px 10px 0px;
    margin: 0px;
}

Dit voorbeeld is natuurlijk een versimpelde versie van de werkelijkheid, maar het principe is duidelijk. Met een minimale aanpassing is je site klaar gemaakt voor een smartphone.

 

Over de auteur

Geert-Jan Smulders
Geert-Jan Smulders

Plaats een reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.