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!

Kapcsolódó bejegyzések:
  • Létezik egy technika, amivel különböző felbontású eszközökre külön css stílusokat tudunk meghívni. Példa 1200 pixelnél kisebb és nagyobb méretekre:…

  • A külső stíluslapfájlok HTML dokumentumainkhoz csatolásának legnagyobb előnye, hogy számos oldal kinézetét megváltoztathatjuk egyetlen fájl, a stíluslap módosítá …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • A következő leírásból megtudhatod, hogyan készíts olyan honlapot, amit minden böngésző biztosan ugyanúgy jelenít meg. Persze ez arra az esetre vonatkozik, ha a l …

  • Ha csak úgy kiteszed egy lapra a linkedet, előbb vagy utóbb (inkább előbb) megtalálnak a spamrobotok és telenyomják a mailboxodat egy rakat kéretlen levéllel. Ha …

A cikket beküldte: andmis (http://andmis.extra.hu)

6 hozzászólás

  1. Azzzzzz says:

    Nem rossz :)

  2. A document.write az nem a képernyőre írja ki az adott szöveget?

  3. Adam says:

    Nem, akkor hogyha a tagok közé írod a js. scriptet

  4. Adam says:

    *head tagok közé

  5. vier says:

    Üdv!

    Ezt nem lehet valahogy megoldani js el?
    PL hogy megadod XY div id-jét vagy class-jat és akkor auton kiszámolná hogy mekkora szélessége és magassága legyen?

    elvégre könnyebb lenne mint minden felbontásra írni 1 css-t.

  6. Teofil says:

    Megcsináltam beillesztettem, és gyakorlatilag semmi hatása nincs…

Szólj hozzá
a Stíluslap váltás képernyőfelbontás alapján Javascripttel c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>