What size should my screens be?

Prototype screen sizes can vary from device to device, but this article aims to provide a few resources for finding common screen resolutions for both desktop and mobile devices.

For information on prototype device frame dimensions in InVision V6, check out this article: What are the dimensions for prototype device frames?

Screen sizes for desktop and web

When designing for desktop or web, you can either size your screens for a specific target resolution or use InVision to make your screens suitable for a variety of resolutions. To learn more, check out this article: How does the zoom/scroll feature behave?

If designing for a target resolution, there are two resources that can be helpful:

• Materialdesign.io includes common desktop devices and their resolutions.
• W3Counter breaks down screen resolutions by popularity each month.

Screen sizes for mobile and tablet

Materialdesign.io also includes popular mobile and tablet screen resolutions.

For the iPhone in particular, paintcodeapp.com and this iOS Design Cheat Sheet are great resources.

Remember, mobile prototypes can scroll, so the screen heights listed on these sites are usually minimum heights for your designs.

When deciding what size screen to use, you should note that particularly large screens may appear blurry when viewed in Safari on iOS. For more information, read this article: Why are my images in iOS blurry?

Including the status bar in iOS

InVision will overlay a status bar on your designs for you, so including it in your design is up to you.

If you don't want to include space for the status bar in your designs:

1. Navigate to your prototype and click to view a specific screen.
2. At the bottom of the page, click the configuration icon ().
3. Check the box My design starts below the status bar.
4. Click Save.

If you want to include space for the status bar in your designs, and you're using our recommended dimensions for device frames, you can use these height measurements:

• iPhone 4: 40 px
• iPhone 5: 40 px
• iPhone 6–8: 40 px
• iPhone 6 Plus–8 Plus: 54 px
• iPhone X: 132 px
• iPad: 20 px

Including the status bar and nav bar in Android

Just as with iOS devices, InVision will overlay a status bar on your designs for you, so including it in your design is up to you.

If you don't want to include space for the status bar in your designs, follow the steps listed in the previous section to start your design below the status bar.

For some Android devices, you might also need to account for the height of the nav bar in your design. For more information, check out Google's documentation on Android bars.