How to display user's monitor resolution even on resize?

Question

I was wondering if there was a way to show a user's screen information that updates when the user resizes their screen. I've seen javascript that just shows the user's screen but doesn't update in real time. Any one know the script for this? Thanks!

So, you simply want your updating-code (the code that renders the 'screen information block') to also be hooked to `window.onresize`? — GitaarLAB, Aug 17 '14 at 15:41
The users monitor resolution will never change even on resize. — Kyle Needham, Aug 17 '14 at 15:55

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

Two thoughts:

The resize event on window, but I suspect the browser won't fire on the screen-size change (might do, though, I suppose). If it doesn't the user will probably resize the window after resizing the screen... Chrome, at least, doesn't fire resize when the screen resolution changes but the browser window size doesn't. Sometimes changing the screen resolution will have the knock-on effect of changing the browser size (e.g., if it needs to be smaller, or if it's docked in some way), but frequently not.
If browsers don't reliably fire resize (and I suspect they don't), you'll have to poll and check the screen object to see if the size changed. Not ideal, but polling once a second or so won't be much overhead.

Here's an example using both methods, plus window.onfocus as GitaarLAB suggested: Live Copy

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<script>
  (function() {
    "use strict";
    var lastSize;

    window.onfocus = window.onresize = checkSize;

    setInterval(checkSize, 1000);

    function checkSize() {
      if (!lastSize || (lastSize.width !== screen.width || lastSize.height !== screen.height)) {
        lastSize = {
          width: screen.width,
          height: screen.height
        };
        display("Screen size is (now) " + lastSize.width + "x" + lastSize.height);
      }
    }

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

Of course, you only need polling if notification on window resize and window focus isn't sufficient.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 17 '14 at 15:41

T.J. Crowder

1,031,962
187
1,923
1,875

+1 css-trick is an interesting technique. Why do you suspect some browsers will not fire resize (not confusing it with `load` or `focus`)? – GitaarLAB Aug 17 '14 at 15:51
@GitaarLAB: Because changing the screen resolution doesn't usually resize the browser window. Since the browser window size doesn't change, I don't know that browsers fire `resize`. As I say, though, the user will probably resize after a screen resize anyway... – T.J. Crowder Aug 17 '14 at 15:53
Deal, I fully understand. So.. what about adding `onfocus` into the mix? I assume the user must unfocused the browser in order to change the resolution, then focus back to the browser to continue browsing? I'm looking at `window.screen.availHeight and window.screen.availWidth` – GitaarLAB Aug 17 '14 at 15:57
1

@T.J.Crowder Wouldn't using the [screen](https://developer.mozilla.org/en-US/docs/Web/API/Window.screen) object be better? – Kyle Needham Aug 17 '14 at 15:57
@KyleNeedham: Does the screen object have an *event* that it raises when values change? Obviously we'd be using `screen` to find out what the current values are, but... OMG, I'm so stupid. If we're going to poll **anyway**... Thanks for that, here I was trying to make the CSS version work and *using* `screen` in the process. Yikes. – T.J. Crowder Aug 17 '14 at 16:03
`window.onresize` AND `window.onfocus` would *not* require polling (interval). Or did I miss something? Extra note: according to a comment to [this answer](http://stackoverflow.com/a/2242100/588079), `screen.availHeight` and `screen.availWidth` don't take `zoom` into account. Might have a peek at how jQuery's `$(window).width()` and `height()` solve that. – GitaarLAB Aug 17 '14 at 16:09
@GitaarLAB: `onfocus` would only happen...on focus. If that's good enough for the OP, great (and I should have added `onfocus` to my example; will do that now). The OP has been really vague about the use case, so... – T.J. Crowder Aug 17 '14 at 16:11
@T.J.Crowder Unfortunately not, polling using `window` looks like the most reliable way. – Kyle Needham Aug 17 '14 at 16:16
Hmm. I wonder.. what about (mobile) devices that change resolution when the user flips the screen 90 degrees? There wouldn't be a `focus` event (due to the user focusing to another window to change resolution) *BUT would they fire onresize*?. Or would those devices have some special property that fires an event if the screen is tilted 90 degrees? IF NOT, then we might after-all be back at polling `:(` *OR..* just poll when we have detected a mobile device (again possibly by using css). Food for thought/research. – GitaarLAB Aug 17 '14 at 16:24
1

Thanks! I'll be saving this! – kduan Aug 17 '14 at 16:35

score 1 · Answer 2 · answered Aug 17 '14 at 15:42

1

How about binding a function to window.onresize?

window.onresize = function (e) {
  console.log("Dimensions: " + e.target.outerWidth + "x" + e.target.outerHeight);
};

answered Aug 17 '14 at 15:42

azz

5,852
3
30
58

What about IE's `window.event`? And cross-browser support? – GitaarLAB Aug 17 '14 at 15:47
I thought (though am currently searching for confirmation) that onresize is cross-browser compliant. If not, your best shot would be `window.addEventListener('resize', fn);` – azz Aug 17 '14 at 15:57
`onresize` will work on any browser (and blow away any previous handler attached to it), yes. But `resize` doesn't fire (at least not in Chrome) when the screen size changes but the browser window size doesn't. – T.J. Crowder Aug 17 '14 at 16:08
Right. Possibly jumped to a simple solution without considering "external forces". – azz Aug 17 '14 at 16:23

How to display user's monitor resolution even on resize?

2 Answers2