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 '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.
Switch between 'no-preference', 'less', 'more' and 'custom' options for the prefers-contrast media feature.
rec2020 color gamut emulation.
Switch between "screen" and "print" stylesheets.
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
- Toggle between LTR and RTL direction
- configure the device pixel ratio
- set a different Locale
- set a custom userAgent
Device type (Desktop vs Mobile rendering)
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.
Turn on RTL or LTR emulation to force a page into right-to-left or left-to-right reading mode. Leave it set to 'auto' to keep the original page's setting.
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.
Emulation or simulation?
The words emulation and simulation are often used interchangeably to obscure what apps are really capable of. This is confusing when you need to find out what those apps actually do.
We like to follow the definitions that companies like Apple and Google use, and that Chromium uses internally. So to avoid confusion, here's what we mean when we say emulation and how that differs from simulation.
- A simulator simulates an entire device. Think of the iOS simulator for Mac or the simulator in Android Studio. This runs the actual browser or application in a simulated environment.
- Emulation, on the other hand, mimics behaviour but implements it in the current engine. For example, Polypane can emulate the Safari for iOS user agent, causing your site to think it's being rendered by Safari while it's being shown in Polypane using the Chromium rendering engine.
Is your question not answered?
Ask via Twitter, Slack or our contact form