Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve device-pixel-content-box notifications when switching resolutions #92

Open
TremayneChrist opened this issue Jan 2, 2020 · 4 comments
Labels
enhancement New feature or request v4 Add to version 4 of the library
Milestone

Comments

@TremayneChrist
Copy link
Member

When a window is dragged across screens with different resolutions, no notification is fired when observing device-pixel-content-box. To improve this, use matchMedia API to watch for resolution changes.

matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
.addEventListener('change', schedule);
@TremayneChrist TremayneChrist added the enhancement New feature or request label Jan 2, 2020
@TremayneChrist
Copy link
Member Author

IE only supports dpi values, so will have to add in some extra fluff for this.

matchMedia(`(resolution: ${window.devicePixelRatio * 96}dpi)`)

Something like this could work, although I'm unsure if screen densities are always based off of 96dpi in browserland.

@TremayneChrist
Copy link
Member Author

pixels (1px = 1/96th of 1in)
Source: w3schools

Therefore everything is based of off 96dpi and can use the above solution.

@TremayneChrist TremayneChrist added this to the v4 milestone Mar 4, 2020
@TremayneChrist TremayneChrist added the v4 Add to version 4 of the library label Mar 4, 2020
@TremayneChrist
Copy link
Member Author

matchMedia is only available in IE10 and above, however, we can probably assume that anyone running IE9 is also using an older monitor.

@mdingena
Copy link

mdingena commented Oct 6, 2020

I wouldn't assume that necessarily, but I'd say that perhaps polyfilling dppx isn't strictly a concern for this library. In #64 you're already recommending users of older browser versions to combine other polyfills with yours. Perhaps this is another such case?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request v4 Add to version 4 of the library
Projects
None yet
Development

No branches or pull requests

2 participants