I am sharing a very useful bit of code I use to get the window width when making responsive sites.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Get browser window size using jQuery (useful for responsive testing)</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(window).bind({ | |
| load:function(){ | |
| var windowSize = $(window).width(); | |
| $('p.window-width').text('Window width = ' + windowSize + 'px'); | |
| }, | |
| resize:function(){ | |
| var windowSize = $(window).width(); | |
| $('p.window-width').text('Window width = ' + windowSize + 'px'); | |
| }, | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Resize your browser window to get width:</h1> | |
| <p class="window-width"></p> | |
| </body> | |
| </html> |
Please comment below if you have any better solution.