How can I use a media query on the parent Chrome window's width? Is it even possible to properly do so from within a Chrome browser action extension with a popup UI?
Right now, my media queries act on the width of the extension's viewport, not on the actual browser's viewport (and the extension's viewport can be larger than the browser's). In a normal web app, the viewport width is always equivalent to the browser's viewport, but it doesn't seem to be the same for an extension.
There seems to be a way to do this with JavaScript by setting the html
tag's width, but if there is a pure CSS way that'd be preferable.
At least in a browser action popup, it is impossible to query the parent window's width with pure CSS. As I thought and @Xan confirmed in the comments, JavaScript is necessary to get the width of the parent window.
A way to do this with JavaScript can be found here: How to get notified on window resize in chrome browser. Note that this does require a content script as chrome.window.onResized
is still an open issue since 2010