How Flinto Handles Screen Sizes
Flinto resizes your screens to fit the width of the target device. If the height is taller than the device height, the screens will scroll.
Read on for all the details.
Note: I’m using the term “legacy” to mean non-retina, or @1x screen size.
Screen Width
Every screen added to a Flinto prototype will be proportionally scaled to fit horizontally. You don’t need to do anything special to achieve the results listed below, just upload the images you have and they will be presented in their best light!
Retina screen on a Retina device: You’ll have a pixel-perfect representation of your screen graphics.
Legacy screens on a legacy device: This will also produce a pixel-perfect representation.
Retina screens on a legacy device: The screen will be scaled down exactly 50% to fit. Usually this works quite well, but you’ll probably want to design artwork for legacy devices when producing the graphics for your app.
Legacy screens on a retina device: In this situation, screens will be scaled up to exactly twice their width to fit. This will produce the same result as viewing any legacy app on a retina device.
Other screen sizes: Flinto is flexible. You can upload any size screens you want, and they will be resized to fit horizontally. Perfect for rough wireframes, photographs of sketches.
Screen Height
Flinto is flexible in this regard too. If you add tall screens, they scroll. If the screens fit exactly, they don’t. Keep in mind that Flinto prototypes show the iOS status bar, so for a perfect height screen, you’ll want to subtract 20pt (1pt is 1px on legacy devices and 2px on retina devices) from the device height.
When we talk about the height of screens here, we’re talking about the proportional height after the width has been adjusted to fit the screen.
Screen taller than device height: In this case, the screen will scroll.
Screen shorter than device height: Here the screen won’t scroll.
Screen shorter than device height: When this happens, there will be some empty space below the screen. This is usually undesirable, so make sure your screens are at least as tall as the device!
iPhone 5 vs older iPhones: Flinto prototypes work on both 3.5″ and 4″ (iPhone 5) screens. Be aware that if you size your screens specifically for 4″ screens, they will scroll a bit on 3.5″ screens and if you size them for 3.5″ screens, they will have some empty space when viewed on a 4″ screen. Fortunately, that last case will become increasingly uncommon as time goes on.