Style Sheets by Resolution 2

By Bob Pearson on Jul 5, 2005

General

Loads a style sheet depending on the user’s screen resolution. This updated version allows for browser window size to govern text size and background image size for high-resolution displays.

Notes

Created by: Bob Pearson
Web Site: http://www.pagecraft.on.ca
Posted: July 05, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: styleSheetsbyResolution2.js

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 <= 1600)  {
  document.write(‘<link rel=”stylesheet” type=”text/css” href=”1600.css”>’);
}
if (winW <= 1280)  {
  document.write(‘<link rel=”stylesheet” type=”text/css” href=”1280.css”>’);
}
if (winW <= 1024) {
  document.write(‘<link rel=”stylesheet” type=”text/css” href=”1024.css”>’);
}
if (winW <= 800) {
  document.write(‘<link rel=”stylesheet” type=”text/css” href=”800.css”>’);
}
if (winW <= 640) {
  document.write(‘<link rel=”stylesheet” type=”text/css” href=”640.css”>’);
}

Head

Paste this code into the HEAD section of your HTML document.


<script type=”text/javascript” src=”styleSheetsbyResolution2.js”></script>

General

Notes

Source Code

External file

Head

Related Items via Envato Market

More CSS JavaScript Snippets