verschiedene Stylesheets für verschiedene Bildschirmauflösungen.

Ich habe ein ganz wunderbares Script gefunden welches ermöglicht verschiedene Stylesheets für je nach Bildschirmgrößen zu laden. Dadurch kann man zum Beispiel ein seperates Stylesheet für Iphone und ähnliche mobile Geräte zur Verfügung stellen
<script type=“text/javascript“>

function getcss(cssfile){

loadcss = document.createElement(‚link‘)

loadcss.setAttribute(„rel“, „stylesheet“)

loadcss.setAttribute(„type“, „text/css“)

loadcss.setAttribute(„href“, cssfile)

document.getElementsByTagName(„head“)[0].appendChild(loadcss)
}
if(screen.width <= ‚480‘)
// Stylesheet für mobile Geräte wie zB Iphone mit Bildschirmauflösung kleiner gleich 480 Pixel)

{

getcss(‚css/style_iphone.css‘)

}

else if(screen.width > ‚800‘ && screen.width < ‚1280‘)
// Stylesheet für Bildschirmauflösungen zwischen 800 Pixel und 1280 Pixel

{

getcss(‚css/style_normal.css‘)

}

else

{

getcss(‚css/style_wide.css‘)
//Für alle Bildschirme größer als 1280 Pixel breite

}

</script>

Das ganze kommt natürlich in den Head bereich der Webseite – die Stylesheets liegen im Verzeichnis /css

Quelle:
http://www.warriorforum.com/website-design/10031-script-load-different-css-depending-screen-resolution.html

Nach oben