This post provides a few potential approaches to help mobile app developers and testers make sure their app complies with the notch feature on the iPhone X.
Let’s be friends:
Comment ( 0)
Join the DZone community and get the full member experience.
Apple (again) reinvented the display with the introduction of the notch on iPhone X screens ( soon on 3 more models, and likely, eventually, across the fleet). From a developer perspective, that innovation may not have been as popular. So much so, that Apple approved a „Notch Remover“ app.
The introduction of the notch made it confusing for app developers to know exactly how to develop the app. There is what’s called a „safe area“ to develop that does not include the notch and as a result, some apps do indeed decide to stay inside the „safe area“, creating a somewhat ugly layout:
Above is an example of how the notch will affect how the content and images render on the screen of the iPhone X.
To solve these problems some are taking a hybrid approach (see YouTube above), where the movie is played inside the safe area but the ads aren’t, some clipping could happen.
Testing your app on the iPhoneX presents even more difficulties. When taking a screenshot or even a video from the device, it will result in a rectangular image. Observe the image above, note how the weather channel logo to the left is cut.
In contrast, the result of taking the video or screenshot from the device, show a perfectly rectangular shape above.
The examples above are the end result of working in the „safe area“ and venturing outside of it. iPhoneX notch is creating additional issues for developers, below are just a few pains that you might be experiencing if you try to develop the app without any additional help.
So the question becomes how can a developer prevent this problem and validate what users will really see and adjust accordingly?
You might need help! Perfecto now offers true rendered view from iPhone X. It shows accurately what will be shown to end users and developers can validate the rendered image. Whether in interactive or automated testing, the true rendered content is available to the developer/tester.
Free DZone Refcard
Comment ( 0)
Published at DZone with permission
of
Amir Rozenberg
, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
