There are two options to detect if your site is running in Polypane. You can use this information to display additional debug information, or serve up various instances of your design (for example, dark and light themes) and test those side by side.
Option 1: user agent
The Polypane user agent is derived from the Chrome user agent and looks like this (With slight variations for Mac, Windows and Linux):
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Polypane/8.1.0 Chrome/98.0.4758.102 Safari/537.36
The user agent will tell you which version of Polypane and Chromium is being used.
If you use emulation then the user agent might be overwritten. For that we have another option:
Option 2: __polypane object
When running in Polypane, the
window object is extended with a
__polypane key. This is an object that gives you information
on the pane your page is running in. It has these properties:
width: The width of the pane in pixels
height: The height of the pane in pixels
index: The (zero-based) index of the panel
title: The title of the pane
hidden: Whether the pane is visible in the UI or not (boolean)
overlay: Which, if any, debug tool is currently active on this pane
zoom: At which zoom level a pane is shown
darkUI: If Polypane is running in dark or light mode
emulation: An object with the emulation options as applied to the pane:
extraHeaders: a string with the extra headers being sent to this pane.
Option 3: The
When running on Polypane, the HTML element will have the 'in-polypane' class applied to it, letting you style based on it.
Have a question about Polypane?
Contact us any time though chat, Slack or our contact form:Contact Support
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed