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
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:
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)
- zoom (optional)
- screenType (Can be either "desktop" or "mobile")
- pixelRatio (The device pixel ratio)
- userAgent (the prefered user agent)
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.
Have a question about Polypane?
Contact us any time though chat, Slack or our contact form:Contact Support
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed