Testing notebooks for HiDPI on non-HiDPI displays

When a custom device pixel ratio is set via the Device Toolbar (in Chrome) or the Responsive Design Tools (in Firefox) the setting only applies to the parent document, but not the worker iframe.

Are there any known workarounds, so that e.g. canvas scaling can be tested on non-HiDPI displays?

Edit: Changed category to “Site Feedback” because it can be argued that the issue is caused by Observable’s sandbox.

Turns out this is a result of the sandbox.
Here’s a reduced test case. Open your dev tools and override the screen size or DPR to view the difference.

I believe this qualifies as a bug in both browsers’ dev tools, because the iframe still has access to the native resolution when overrides are active. If anyone is aware of bug reports for either of those browsers, please let me know.

Edit: An Observable test case can be found here.

1 Like