Why window.matchMedia is called when I print the page in Chrome?

user_6695569 0
Viewed 267

I have found out that when I have a matchMedia query based on width which is listening in a page, it is called when I print it.

Here is a snippet that would be more comprehensive :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover" />
  </head>

  <body>
    <div>Open me in chrome, look at the console and print the page</div>
    <script>
      const mediaQuery = window.matchMedia('only screen and (min-width: 768px)')
      mediaQuery.addEventListener('change', () => {
        console.log('change width event', { innerWidth: window.innerWidth, outerWidth: window.outerWidth })
      })
    </script>
  </body>
</html>

In my console I can see that window.innerWidth has the value 555 when I print and then the mediaQuery is called right after this with the correct value of my window (which is bigger than 555).

Why does this happen, how can we disable this ?

media-queries javascript
2 Answers

It's probably because of only screen which is the opposite of print. When you print the page , the query won't apply anymore and the matchMedia event is called

Just removing only screen might fix your problem

Edit: An other idea might be to catch print requests with window.onberforeprint (window.addEventListener("beforeprint", function(event) { ... });) and set a boolean so you now the page is printed

user_129070880

It seems, that Chrome/Webkit reloads the page for the print preview, makes sense.
Why the fire the Event twice I can't say (once in print and once not in print), there are many contradicting article on the web. I assume it has to do with switching context between the preview and the normal browser window, but in any case here is a working solution with the matchMedia.

Disclaimer: it is a bit hacky/verbose, but works.

Warning / Info: there is a edge case, when you close the print-window too fast/in the right second, that the second event won't fire. AND because of this the next normal event will be ignored. To remedy this, one could also add the line with a setTimeout statment, that resets the _ignoreNext property / variable. (I didn't include it in the code since it was already very long)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover" />
  </head>

  <body>
    <div>Open me in chrome, look at the console and print the page</div>
    <script>
      const mediaQuery = window.matchMedia('(only screen and (min-width: 768px))');
      mediaQuery.addEventListener('change', () => {
            // check if the current state is for media Query "print"
            let matchtesPrint = window.matchMedia('print').matches;
            // mq._ignoreNext is a helper Variable, to catch the second Event triggered
            if(mq._ignoreNext && !matchtesPrint){
                // reset everything to "normal"
                mq._ignoreNext = false;
            } else if(matchtesPrint){
                // if in print mode set helper variable, so that second event can be skipped
                mq._ignoreNext = true;
            } else {
                // normal mediaMatch
                console.log('change width event', { innerWidth: window.innerWidth, outerWidth: window.outerWidth });
            }
      })
    </script>
  </body>
</html>

user_16792860
Related