Emulation

With Isolate panes mode on, a new icon gets added to the pane header: . This icon lets you emulate devices right from inside Polypane. All the Device presets already include the emulation settings, but you can easily tweak or add your own. Sometimes this feature might be called simulation.

If any device emulation is active, the icon will have a blue dot.

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
  • configure the device pixel ratio
  • set a custom userAgent
  • set different Media Features
  • emulate different network connections
  • include custom headers

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.

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.

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.

Media Feature emulation

With Media feature emulation you can toggle between screen and print stylesheets and emulate both prefers-color-scheme and prefers-reduced-motion to easily test user preferences side-by-side.

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. Setting 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 instant 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.

Is your question not answered?
Ask via Twitter, Slack or our contact form

We reinvented the browser

and made it perfect for web developers and designers.

Get Polypane

By using our site you agree to our privacy policy and disclaimer