Click the Emulation icon in the pane header: to configure the emulation for a pane. All the Device presets already include the emulation settings. You can tweak these settings or add your own.
If any sort of device emulation is active, the icon will have a blue dot.
The panel is split into three tabs: Media, Emulation and Network.
Easily toggle between different media features to test how your site responds to them, like dark mode, reduced motion, or print.
Switch between "screen" and "print" stylesheets.
Switch between 'light' and 'dark' mode color schemes usign prefers-color-scheme.
Switch between 'no-preference' and 'reduce' options for the prefers reduced motion media feature.
Switch between 'no-preference' and 'reduce' options for the prefers reduced data media feature.
In the device emulation popup, you can edit the following options:
- Set the device type to desktop or mobile
- turn on touch emulation
- turn on automatic orientation support
- configure the device pixel ratio
- set a different Locale
- set a custom userAgent
The default device type for Polypane is desktop, and it behaves like regular desktop browsers. With the Mobile device type, Polypane will respond like a mobile browser, taking into account the viewport tag and zooming out the page if needed.
When you turn on touch emulation, clicking into the pane will change your cursor to a round dot. Now you can use your mouse as if it was your finger, and drag to scroll the page. Clicking outside of the pane will change your cursor back.
When you turn on orientation emulation, Polypane will automatically set the orientation depending on your pane dimensions and send the appropriate orientation change events when you rotate a pane. This is only needed for JS, since the
orientation media query already works basedon the pane dimensions.
Device pixel ratio
Emulating the device pixel ratio will make your pane do things like choose the right responsive images in a
srcset attribute and simulate HD or Retina (2x or 3x) screens.
You can set a different locale to request a page in that language and set the default for the
Intl API's. Note that
navigator.language is not updated at the moment.
Some scripts and sites still use user agent sniffing to determine what device they're running on, as opposed to doing feature detection. With this custom userAgent you can support these too.
With network emulation you can switch between "online" (your regular connection), a "mid-tier mobile" connection (fast 3G), a "low-end mobile" connection (slow 3G) and offline.
This will throttle your download, upload and latency and give you an approximation of how fast your site will load under these conditions.
When network emulation is active, the icon will have an orange dot.
Supply multiple custom headers (one per line) and they will be sent with each request. This is an amazingly powerful way to test for instance multi language support using the
accept-language: header. Give each pane a different value, like
nl and test that your server handles them correctly.
You can also send your own custom headers, like
polypane: true, and use that to include extra scripts or debugging information.
Note: Emulation does not work in legacy mode.
Is your question not answered?
Ask via Twitter, Slack or our contact form