Device presets

Polypane comes with a list of pane presets in four different categories: Mobile, Tablet, Desktop and Other. These contain a wide range of common devices, from iphones to android phones to smart watches to TV sizes. These device presets contain both viewport and device size options.

We keep this list up to date with popular iOS and Android devices and add new devices as they become available. If you have requests, let us know

Selecting devices

To select a device, click the title of a pane. The list of devices will be overlaid on top of the pane, and you can either click or use the arrow keys to select a device preset.

To the right of each device you can see the dimensions, and these will be updated depending on whether you pick viewport sizes or device sizes, and whether the current pane is in landscape or portrait orientation (depending on if a device supports orientation: a phone does, but TVs don't).

Viewport size or device size

at the top of the device selector there is a toggle button that will change the devices between the viewport size or the device size.

The viewport size is the size that is available to your site inside a (mobile) browser. It excludes the height of the navigation bar, status bar etc. This is perfect for building websites, because the size of the pane matches the available space when shown inside a browser on the device.

Viewport sizes have portrait and landscape variants (the space taken up by the navigation bars is different depending on the orientation) and we will automatically resize them to the appropriate sizes when you rotate a pane.

The Device size is the full, specified pixel dimensions of a device, ideal if you're developing a hybrid app. This setting will be remembered per pane.

Custom device presets

It is also possible to replace this list with your own custom device sizes. To use a custom preset list, save a file called pane-sizes (no extension) in this directory:

• Windows: %APPDATA%/Polypane/
• macOS: ~/Library/Application Support/Polypane/
• Linux: ~/.config/Polypane/

An example file can be found here: pane-sizes. In this file you can add, remove or rename categories and presets. You can add as many groups as you want (so you could split 'Mobile' into 'iOS' and 'Android' if you wanted to). Each group has a array of children, which have the following properties:

• key (the name)
• width
• height
• zoom (optional)
• screenType (Can be either "desktop" or "mobile")
• pixelRatio (The device pixel ratio)
• userAgent (the prefered user agent)
• viewport
  • portrait
    • width
    • height
  • landscape
    • width
    • height

The boolean supportsOrientation on a category determines if orientation should be taken into account for this category.

A future version of Polypane will provide a UI to manage device presets.