Android and browser screen size differences giving you a headache? Tired of trying to find the best-fit Aspect Ratio to support all of those droids and UI navigation bar sizes for mobile browsers like Chrome and Safari?
The Fill Screen and Stretch to Fit screen options under Settings > General > Image Display are provided. These were available with New Android APKs starting in December 2016, and instantly available for PWA Web App. iOS devices will remain Fill Screen as their Aspect Ratios are constant for their devices.
These selections will change the way all the background and slider images are handled throughout the app, no more missing logos at the top of your screen or trimming the text off the edges. If you still wish to have your circles be circles and maintain your images' integrity, you will want to keep your selection as ‘Fill Screen’.
For more details on the Aspect Fill decisions, and to see how images are handled in this mode, see below:
Before we go into detail, if you simply wish to know the best image size for Cedar apps and newer here is the short answer, the aspect ratio is:
- 16x9 for Mobile
- 4x3 for Tablet
Recommended optimum quality + loading times will be:
- 750 x 1334 for Mobile
- 1536 x 2048 for Tablet
We previously used a "Scale to Fill" display for app images, which often yields skewed images as they scale to fit different device screen sizes. Plus, the amount of space for background images varies feature by feature, making it tougher to design efficiently with your whole app in mind.
For our Cedar release and onward, we're changing how images are displayed in the mobile apps boundaries in an effort to improve support for multiple devices and reduce your design time. By using the Aspect Fill mode, the apps will maintain the integrity of your images, avoiding distortion altogether. We've also increased the space background images cover—they now sit behind the header and other elements that take up screen real estate, reducing the feature-to-feature variations that made background image design difficult in the past.
All iPhones since the iPhone 5 and nearly all modern Androids have an aspect ration of 16:9, so we recommend the same for background images. In terms of resolution, anything between iPhone 6 to 6 Plus resolution will yield optimal clarity and file size. We've also adjusted our recommended feature background image dimensions for Cedar and onward: 750x1334px to 1242×2208px for Mobile. Tablet will be 1536x2048px.
All other images like headers, button backgrounds, and thumbnails will also use Aspect Fill to avoid distortion.
Please visit Apple's visual representation of the Aspect Fill design, under the Content Modes section.