Emulation

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.

Media

Easily toggle between different media features to test how your site responds to them, like dark mode, reduced motion, or print.

Media type

Switch between "screen" and "print" stylesheets.

prefers-color-scheme

Switch between 'light' and 'dark' mode color schemes usign prefers-color-scheme.

prefers-reduced-motion

Switch between 'no-preference' and 'reduce' options for the prefers reduced motion media feature.

prefers-reduced-data

Switch between 'no-preference' and 'reduce' options for the prefers reduced data media feature.

Emulation settings

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

Device type

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.

Touch emulation

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.

Orientation

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.

Locale

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.

Custom userAgent

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.

Network emulation

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.

Custom headers

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 en-us or 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

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Polypane screenshot