I’m seeking clarification on the unit of measurement used for the board dimensions.
When creating a board using the “iPhone 12 mini” preset, the dimensions are set to 360x780. However, according to Apple’s official specifications, the iPhone 12 mini has a resolution of “2340-by-1080 pixels at 476 ppi”.
I’d like to add custom devices, but I’m unsure how to scale them accurately. Could someone provide insight into the unit of measurement used and how to use official specs to create custom devices?
1 Like
The res specs indicate as you have also mentioned a hi-dpi. The resolution provided by Penpot is meant to accurately represent the size of the device as compared to desktops and laptops, so that you can make your designs responsive.
Thanks for the response, but I’m still a bit confused about the unit of measurement for the board dimensions. Can you help me understand how to interpret the numbers (like 360x780) and how to use official specs to create custom devices?
The unit of measurement is still pixels, it’s just divided down to a non hi-dpi resolution, so that the size of your artboard stays accurate relatively to your desktop artboards.
Notice that if you multiply the Penpot resolution by 3 it results exactly in the official spec resolution.
If you want to export your artboard to the full pixel density of the device, just export a PNG x3 (triple in height and width).
Then you can use it in mockups or wherever you like. Device resolution refers to the number of dots that light up when you use the device. Web dev pixels (CSS/HTML) are a unit of measurement that stays consistent in perceived size across devices, no matter the number of dots that light up.
Basically, Penpot ensures that the div you draw at 200px width on an iphone or on a desktop would look exactly the same if you were to write the CSS to make it a width of 200px.
Web design wise this is exactly what you want to achieve. When exporting for mockups, always scale up your smaller devices to avoid low res result.
Is everything clear now?
1 Like
Thank you! Your reply answered all of my questions.
1 Like
