Question

How can I detect window/browser size with jQuery like Gmail? In Gmail, we don’t need to refresh or reload current page as soon as we have changed window resolution in window setting? In my project, I need to refresh the browser as soon as window setting has been changed.

Any idea will be appreciated.

Answer 1

You cannot really find the display resolution from a web page. There is a CSS Media Queries statement for it, but it is poorly implemented in most devices and browsers, if at all. However, you do not need to know the resolution of the display, because changing it causes the (pixel) width of the window to change, which can be detected using the methods others have described:

$(window).resize(function() {
  // This will execute whenever the window is resized
  $(window).height(); // New height
  $(window).width(); // New width
});

You can also use CSS Media Queries in browsers that support them to adapt your page’s style to various display widths, but you should really be using em units and percentages and min-width and max-width in your CSS if you want a proper flexible layout. Gmail probably uses a combination of all these.