my client would like to override some css tags according to clients screenresolution.

so we would like to change load another css file if the resolution is smaller then 1024 pixel.

i found this tutorial


can somebody tell us how to implement that.

or is there a way to write a module to load a specific css file if resolution is smaller then 1024 pixel?




akaserer’s picture

i found a solution:

i use the austin (zen subtheme) theme and it includes a scripts.js file in where i entered my javascript code

var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
  winW = window.innerWidth-16;
  winH = window.innerHeight-16;
if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
if (winW <= 1000) {
//  alert(winW);
  document.write('<link rel="stylesheet" type="text/css" href="../sites/all/themes/austin_two/detect_small.css">');

after that it automatically loads the css file.

the only thing which could be improved is the "href="../sites/all/themes" as the link should start from drupal root directory (it is "/sc" not /).