min-device-width CSS gond megoldása Internet Explorer-ben jQuery-vel

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:

1
2
<link rel="stylesheet" media="screen and (max-device-width: 1199px)" href="style.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1200px)" href="style-1200.css" />

A gond az, hogy a designerek kedvenc böngészője, az Internet Explorer fittyet hány erre. Ez a probléma orvosolható egy egészen egyszerű jQuery javascript függvénnyel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="http://code.jquery.com/jquery-latest.js"></script> //először meghívjuk a legfrissebb jQuery scriptet
 
<script>
if ( $.browser.msie ) { //ha Internet Explorer-rel van-e dolgunk, folyatjuk
$(document).ready( function() {
$("head").append("<link>");
css = $("head").children(":last");
if (document.documentElement.clientWidth > 1199) { // ha a böngésző szélessége nagyobb, mint 1199 pixel, akkor meghívjuk a kívánt css-t
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/css/style-1200.css"
});
} else { // ha kisebb, akkor más css-t hívunk meg
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/css/style.css"
});
}
});
}
</script>

Láthatjátok működés közben a weboldalamon. Jelenleg fotós vagyok, de kevesen tudják, hogy régebben foglalkoztam programozással és design-nal is, ezért ne lepődjetek meg, hogy nem egy programozói blogra látogattatok :)

1 hozzászólás

  1. Gondolkodtam ezen már régebben, de lusta voltam belemerülni. Pont jókor írtad ezt a posztot, köszönöm :)

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét