mobiel - tablet - vaste pc/ laptop

Status
Niet open voor verdere reacties.

pas260

Gebruiker
Lid geworden
14 aug 2013
Berichten
22
Graag wil ik 3 websites bouwen, een voor mobiel een voor tablet en een voor pc/laptop
Ik kan natuurlijk een responsive site maken zodat het overal kijk en leesbaar is maar de doelgroep is verschillend.
uiteraard wil ik graag als men op de website gaat dat men naar het juiste wordt door gestuurd, ik begrijp dat je dat kan doen door middel van

Code:
@media screen and (min-width: 1441px)

maar hoe pas ik het toe dat hij stuurt naar de juiste, het doel is dat als het scherm smaller is als 400 dat ik dan de website www.......nl/mobiel ziet ( of m......nl ik weet nog niet waar ik voor ga kiezen ).
is het tussen 400 en 1024 dan de tablet variant, en groter dan 1024 de pc variant.
en stel dat men op de mobiel toch de pc of tablet variant wil zien kan dat dan als nog ? of kom ik dan in de knoop ( ook andersom tablet laten kiezen voor mobiel of pc )
ik zou ook kunnen kiezen voor 3 knoppen bij het start scherm maar dat vindt ik minder mooi.



Code:
<!DOCTYPE html>
<html>

<head>
<title>hier komt de titel</title>
<meta charset="utf-8">
<meta name="keywords"content="woord 1 , woord 2 ">

</head> 

<body>

</body>

</html>
 
Ik heb nu onderstaande van gemaakt en dat werkt om de schermen van kleiner dan 700 door te sturen naar mijn mobiele site maar ik wil er ook aan toe voegen
voor tablet en pc.
Hoe kan ik dat toevoegen ?



Code:
<!DOCTYPE html>
<script>
<!--
if (screen.width <= 699) {
document.location = "http://..........nl";
}
-->
</script>



<html>
<head>

<title> 
</title>
</head>
<body>


</body>


</html>
 
Vooraf @media bepalen werkt, maar is minder handig. Google eens en je vindt 100'en manieren om dit te doen, ppffff.

Een andere manier van werken kan zijn:
- Maak toch een responsive site.
- Maak eerst de mobiele layout (mobile-first design).
- Maak daarna je browser breder totdat de layout niet meer handig of aantrekkelijk is.
- Dit wordt dan het punt waar je de @media instelt.
- Herhaal de vorige 2 stappen telkens.

Suc6 met je website.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan