Advanced Search

Detect iPhone/iPad, window resolution and setup CSS classes

/ Published in: JavaScript
Save to your folder(s)
Also selects different sized header images for better image quality.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var iDevice = '';
  2. if (/iPhone/.test(navigator.userAgent) || /iPod/.test(navigator.userAgent)) {
  3.   iDevice = ' iphone';
  4. } else if (/iPad/.test(navigator.userAgent)) {
  5.   iDevice = ' ipad';
  6. }
  7. var myWidth = 0;
  8. if( typeof( window.innerWidth ) == 'number' ) {
  9.   //Non-IE
  10.   myWidth = window.innerWidth;
  11. } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  12.   //IE 6+ in 'standards compliant mode'
  13.   myWidth = document.documentElement.clientWidth;
  14. } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  15.   //IE 4 compatible
  16.   myWidth = document.body.clientWidth;
  17. }
  18. document.write("<DIV ID=\"page");
  19. if (myWidth>1024) {
  20.   if (myWidth>1280) {
  21.     document.write("-over-1280");
  22.   }
  23.   document.write("\" CLASS=\"highres");
  24. }
  25. else {
  26.   document.write("\" CLASS=\"lowres");
  27. }
  28. document.write(iDevice);
  29. document.write("\"><DIV ID=\"header\"><A HREF=\"/\"><IMG ID=\"masthead\" SRC=\"/");
  30. if (myWidth>1152) {
  31.   document.write("1280");
  32. }
  33. else if (myWidth>1024) {
  34.   document.write("1152");
  35. }
  36. else if (myWidth>800) {
  37.   document.write("1024");
  38. }
  39. else if (myWidth>640) {
  40.   document.write("800");
  41. }
  42. else {
  43.   document.write("640");
  44. }
  45. document.write(".png\" ALT=\"confoozled.com\"></A></DIV>");

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.