Jeden z czytelników poprosił mnie o napisanie skryptu , który po wykryciu rozdzielczości ekranu
zmieniałby logo na stronie.
Opis
Skrypt jest bardzo prosty w działaniu: krok pierwszy - wykrycie rozdzielczości:
var szer=screen.availWidth;
Często spotykaną konstrukcją jest: screen.width (i analogicznie height), ale ten sposób poinformuje nas tylko o całkowitej szerokości okna. Okno nie zawsze może jednak zajmować pełen obszar ekranu. Z pomocą przychodzą nam właściwości screen.availWidth oraz screen.availHeight, które podają rzeczywistą wielkość ekranu.
Będzie nam jeszcze potrzebna funckja document.write(), która wpisze na stronę odpowiedni element, w zależności od wykrytej rozdzielczości.
A oto zastosowana konstrukcja:
var msg="<img src='../images/800.gif' width=700 height=70 border=1>";
// wybor odpowiedniego loga w zaleznosci od rozdzielczosci
if(szer>=1024)
var msg="<img src='../images/1024.gif' width=900 height=100 border=1>";
else if(szer>=800)
var msg="<img src='../images/800.gif' width=700 height=70 border=1>";
itd...
Zmienna msg przechowuje odpowiedni string, który po pomyślnym rozpoznaniu rozdzielczości zostanie wpisany na stronę. Początkowo zmiennej tej przypisywana jest pewna domyślana wartość, która jest używana w przypadku, gdy żadna z rozdzielczości nie
została uwzględniona w bloku if() {...} else if() {...}.
|