Stíluslap váltás képernyőfelbontás alapján Javascripttel

Ebben az ismertetőben azt próbálom bemutatni, hogyan igazíthatjuk weblapunk kinézetét a felhasználó által használt képernyőfelbontáshoz és böngészőhöz.
Javascriptünk érzékeli a felhasználó képernyőfelbontását és az általa használt böngészőprogramot, és más-más stíluspapokat tölt be a kapott értékeknek megfelelően.

Három lépésben nézzük meg a kérdést:
1. lépésben eltérő képernyőfelbontásokhoz más-más stíluslapot töltünk be weblapunkhoz.
2.lépésben a felhasználók böngészőprogramjaihoz töltünk be más-más stílust
3. lépésben ötvözzük a kettőt, scriptünk mind a két paramétert vizsgálja, és aszerint tölt be CSS lapot.

Mindhárom esetben javascriptünknek weblapunk head részében kell lefutni,javaslom, hogy külön fájlban helyezzük el a javascriptet, és a script elemmel kapcsoljuk weblapunk head részéhez a következő módon:

1

<script language="javascript" type="text/javascript" src="fájlnév.js"></script>

Adjunk meg hagyományos módon egy css lapot:

1

<link href="stilus1.css" rel="stylesheet" type="text/css" />

Erre azért van szükség, hogy ha olyan böngészővel nézik lapunkat, melyben nincs javascript támogatás (vagy kikapcsolták), akkor ez a css lap töltődik be. Ha viszont működik a javascript, akkor az tölti be a stíluslapot, és ennek a lépésnek nincs jelentősége.
Ha szabályosak akarunk lenni ezt követően megadhatjuka későbbi scriptünk által használt stíluslapokat is:
pl.

1
2

<link href="stilus2.css" rel=" alternate stylesheet" type="text/css" />
<link href="stilus3.css" rel=" alternate stylesheet" type="text/css" />

stb…

Ennyi előkészület után nézzük a javascripteket:

1.Olyan scriptet hozunk létre, amely érzékeli a weblapunkat meglátogató felhasználó képernyőfelbontását, és aszerint tölt be css lapot weblapunkhoz.

Lehet például ez a script:

1
2
3
4
5
6

if (screen.width > 1152)  {
  document.write('<link rel="stylesheet" type="text/css" href="stilus1.css">');
}
if (screen.width <= 1152)  {
  document.write('<link rel="stylesheet" type="text/css" href="stilus2.css">');
}

A script a képernyőszélességét érzékeli, lehetne bonyolítani a képernyőmagassággal is, de a képernyőszélesség általában meghatározza a magasságot is, és így az adott képernyőméretre készíthetjük a css lapot. A fenti script 1152-nél nagyobb képernyőszélesség esetén a stilus1 nevű lapot csatolja a html oldalhoz, egyéb esetben pedig a stilus2 nevű css lapot. Természetesen ezt a két stiluslapot el kell készítenünk és a html oldal mappájába elhelyezni.
A második if tag helyett írhatunk else kifejezést is, akkor nem kell megadni feltételt, az első if tagban meghatározott feltétel nem teljesülése esetén az else után meghatározott css lap töltődik be.( Erre példa a 2. lépésben látható.)
Persze több if feltételt is írhatunk, csak arra vigyázzunk, hogy a megadott feltételek lefogják az összes választási lehetőséget, mert különben nem működik a program.

2. lépésünk nagyon hasonlít az elsőre, csak most a felhasználó böngészőprogramja alapján tölt be a script más css lapokat.

Ime a script:

1
2
3
4
5
6

 if ((navigator.appName).indexOf("Microsoft")!=-1) {
  document.write('<link rel="stylesheet" href="ie.css" type="text/css">');
 }
else   {
document.write('<link rel="stylesheet" href="mas.css" type="text/css">');
}

Ha ez a scriptünk, akkor Internet Exploler használat esetén weboldalunkhoz az ie nevű stíluslap kapcsolódik, más böngészőprogram használata esetén pedig a mas nevű css lap.
Természetesen itt is lehet megadni más lehetőségeket is, a 3. lépésben majd láthatjuk.

3. lépés Most már bonyolultabb scriptet nézzünk:
Ez a script megvizsgálja, hogy a felhasználó Internet Explolert, Opera vagy Netscape alapú böngészőt (pl. Firefox) használ-e, majd a képernyőfelbontást is érzékeli és más-más stíluslapokat tölt be minden variáció esetén:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

 if ((navigator.appName).indexOf("Microsoft")!=-1) if (screen.width > 1152) {
  document.write('<link rel="stylesheet" href="ie1280.css" type="text/css">');
}
if ((navigator.appName).indexOf("Microsoft")!=-1) if (screen.width <= 1152) {
  document.write('<link rel="stylesheet" href="ie1152.css" type="text/css">');
}
if ((navigator.appName).indexOf("Microsoft")!=-1) if (screen.width <= 1024) {
  document.write('<link rel="stylesheet" href="ie1024.css" type="text/css">');
}
if ((navigator.appName).indexOf("Microsoft")!=-1) if (screen.width <= 800) {
  document.write('<link rel="stylesheet" href="ie800.css" type="text/css">');
}
if ((navigator.appName).indexOf("Opera")!=-1) if (screen.width > 1152) {
  document.write('<link rel="stylesheet" href="op1280.css" type="text/css">');
}
if ((navigator.appName).indexOf("Opera")!=-1) if (screen.width <= 1152) {
  document.write('<link rel="stylesheet" href="op1152.css" type="text/css">');
}
if ((navigator.appName).indexOf("Opera")!=-1) if (screen.width <= 1024) {
  document.write('<link rel="stylesheet" href="op1024.css" type="text/css">');
}
if ((navigator.appName).indexOf("Opera")!=-1) if (screen.width <= 800) {
  document.write('<link rel="stylesheet" href="op800.css" type="text/css">');
}
if ((navigator.appName).indexOf("Netscape")!=-1) if (screen.width > 1152) {
  document.write('<link rel="stylesheet" href="moz1280.css" type="text/css">');
}
if ((navigator.appName).indexOf("Netscape")!=-1) if (screen.width <= 1152) {
  document.write('<link rel="stylesheet" href="moz1152.css" type="text/css">');
}
if ((navigator.appName).indexOf("Netscape")!=-1) if (screen.width <= 1024) {
  document.write('<link rel="stylesheet" href="moz1024.css" type="text/css">');
}
if ((navigator.appName).indexOf("Netscape")!=-1) if (screen.width <= 800) {
  document.write('<link rel="stylesheet" href="moz800.css" type="text/css">');
}

Ebben a scriptben két if feltétel teljesülése esetén kerül betöltésre az adott css lap. Természetesen itt is el kell készíteni a használt (megadott) stíluslapokat, itt pl. 12 darabot:-). Persze a valóságban nincs szükség ennyire, ez csak bemutatónak készült.

Ennek a scriptnek a működését láthatjátok a következő címen: http://andmis.extra.hu/felbontas

A stíluslapok itt más-más háttérszínt és betűszínt jelenítenek meg a felhasználó böngészője és képernyőfelbontása alapján. Persze hasznosabb módon is felhasználható ez a script, de ez már a css lapok készítőin múlik:-)

Jó munkát kívánok!