Temat: CSS ładowany zależnie od rozdzielczości

Witam,

Mam mały problem, w ajax dopiero zaczynam, a potrzebuję skrypt, który będzie mi ładował 2 różne arkusze stylów zależne od rozdzielczości. Tzn. od szerokości 800 do 1024 ładuje się 1 arkusz, a od 1280 wzwyż drugi.

Grzebiąc u wujka google znalazłem coś takiego:


<script>
document.onreadystatechange = function () {
if (document.readyState == "complete") {
var rozdzielczosci = new Array("1024_768", "1280_1024");
for(i=0; i<rozdzielczosci.length; i++){
if(rozdzielczosci[i]==screen.width + '_' + screen.height){
document.getElementById('styl').href=screen.width + '_' + screen.height + '.css';
}
}
}
}
</script>


Problem jest taki, że ten skrypt nie jest "elastyczny" czyli jak jest 1024 to ładuje 1024, a jak jest 1280 to ładuje 1280 i nic pomiędzy, gdyż w momencie, w którym rozdzielczość nie odpowiada żadnej z tablicy ładowany jest styl domyślny (czyli ten większy)i tak jak ktoś ma szerokość ekranu 900 to zamiast ładować mu 1024 ładowane jest 1280.

I tu moje pytanie. Wie ktoś może jak przerobić to tak, żeby działało to elastycznie na zakresie tych rozdz, a nie na sztywnych wartościach. Pewnie jak wezmę książkę od AJAX'a z półki (co w sumie teraz robię) to w końcu do tego dojdę, ale zejdzie mi na tym masę czasu to raz, a dwa już jestem tak zakręcony, że nie myślę :)

Temat: CSS ładowany zależnie od rozdzielczości

Wymyśliłem coś takiego:


<link id='styl_id' rel="stylesheet" type="text/css" href="1024_768.css">
<script language="javascript">
var szerokosc = screen.width;
if(szerokosc <= 1280) {
document.getElementById('styl_id').href = "1024_768.css";
}
else {
document.getElementById('styl_id').href = "1280_1024.css";
}
</script>


Działa, ale zachodzę w głowę, czy jest to poprawne składniowo i bezpieczne...

konto usunięte

Temat: CSS ładowany zależnie od rozdzielczości

a nie prosciej:

if(screen.width >= 1280) {
document.getElementById('styl_id').href = "1280_1024.css";
}

//zle popatrzylemAndrzej Maciurzyński edytował(a) ten post dnia 20.12.10 o godzinie 19:36

Temat: CSS ładowany zależnie od rozdzielczości

heh dokładnie, sam się dzisiaj zakręciłem, ale zrobiłem to jakoś :)

w miarę działa, ale teraz czeka mnie parę h dostosowywania grafiki, żeby idealnie wpasowywała się od <=1280 i >=1280 :) ale już jestem bliżej półmetka, tak to jest jak się zachce komuś robić stronę horyzontalną :)
Przemek Szalko

Przemek Szalko iOS Developer + Full
Stack Developer

Temat: CSS ładowany zależnie od rozdzielczości

CSS można ładować w zależności od rozdzielczości bez używania JS.
Można nawet ładować odrębne regułki CSS w zależności od rozdzielczości.

Polecam prezentację: CSS3 Media Queries
Na slajdzie 65 jest info o supporcie wśród różnych przeglądarek.

Tutaj jeszcze szybkie how to: http://css-tricks.com/css-media-queries/
Jest też info jaki trick zastosować dla IE.Przemek Szalko edytował(a) ten post dnia 22.12.10 o godzinie 01:04
Piotr K.

Piotr K. QA / Test Engineer
at Luxoft / UBS

Następna dyskusja:

Javascript (Ajax) + CSS




Wyślij zaproszenie do