Javascript: Detect & Display Width Of Page (Good For Debugging Website Widths)


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. window.onload = function(){setScreenClass()};
  2. window.onresize = setScreenClass;
  3.  
  4. // Following transition classes will be declared:
  5. //
  6. // classname screenwidth
  7. // ------------------------------------------
  8. // pda_v 240px
  9. // pda_h 320px
  10. // ultralow 320px - 640px
  11. // screen_lo 640px - 800px
  12. // screen_med 800px - 1024px
  13. // screen_hi 1024px - 1280px
  14. // screen_wide > 1280px
  15.  
  16.  
  17. function setScreenClass(){
  18. var fmt = document.documentElement.clientWidth;
  19. var cls =
  20. (fmt<=240)?'pda_ver':
  21. (fmt>240&&fmt<=320)?'pda_hor':
  22. (fmt>320&&fmt<=640)?'screen_ultralow':
  23. (fmt>640&&fmt<=800)?'screen_low':
  24. (fmt>800&&fmt<=1024)?'screen_med':
  25. (fmt>1024&&fmt<=1280)?'screen_high':'screen_wide';
  26. document.getElementById('count').innerHTML=fmt+'px -> '+cls;
  27. document.body.className=cls;
  28. };
  29.  
  30.  
  31.  
  32. Add anywhere on page and style if preferred.
  33. <div id="count"></div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.