By akaserer on

hi

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

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

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?

thanks

andreas

⋅ Categories: Drupal 6.x

Comments

akaserer’s picture

akaserer commented

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 /).