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.
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
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.
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.
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
prefers-reduced-motion to easily test user preferences side-by-side.
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.
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
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