Advanced Search

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

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

Expand | Embed | Plain Text

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.