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 :)

Kapcsolódó bejegyzések:
  • 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. Javascri …

  • 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 …

  • Egyre ritkábban ugyan, de még előfordul, hogy a HTML elkészítésekor a grafikusnak/designernek (esetleg magunknak :)) hála szeretnénk úgy PNG24-es képeket használ …

  • Honlapkészítés közben néha jól jön, ha az egyes böngészők különböző szabványértelmezése miatt egyes CSS részleteket, kódokat böngészőhöz kötve tudunk definiálni. …

  • 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 cikket beküldte: Fábián Gábor (http://www.fabiangabor.com)

1 hozzászólás

  1. Hunor says:

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

Szólj hozzá
a min-device-width CSS gond megoldása Internet Explorer-ben jQuery-vel 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>