iPhone X – Fit to display without the top & bottom bars

One of the most stunning and sought-after phones is the new iPhone X edge to edge model. A less — bezel phone. There is this small issue of white bars at the top & bottom portions of the screen. This is known as the letterboxing, in websites. We’ll just call it notches. We, wanted your mobile application development to be a smoother process, in case you encounter the same mistakes.

When testing, the app was run using Cordova-ios-4.5.5 on the new iPhone X edge to edge model in the X code simulator (Version 9.1.2), the application was expected to fill the screen however, it didn’t. The top and bottom sections of the screen were filled with white bars, instead.

Fortunately, there are two steps that makes these bars disappear.

I. Set a Viewport Meta Tag

Set the Viewport fit to cover in the index html file.

Copy to Clipboard

One of the most stunning and sought-after phones is the new iPhone X edge to edge model. A less — bezel phone. There is this small issue of white bars at the top & bottom portions of the screen. This is known as the letterboxing, in websites. We’ll just call it notches. We, wanted your mobile application development to be a smoother process, in case you encounter the same mistakes.

Copy to Clipboard

The Viewport Meta tag fits the display to the entire visible screen. It varies from device to device, and will be smaller on a mobile phone than on a computer screen.

It simply works, yet replaces the white bars with black bars. To remove this continue with the next step.

II. Include config.xml file to remove black bars.

The issue was because the cordova was set to default values which were altered to include the cordova-plugin-splashscreen which incorporates the legacy launch images.

Add the following to the config.xml

After including the below statements, make the following changes to the dimensions in res/screen/iOS.

Copy to Clipboard

With these changes made you can now, see the desired outcome.

Centizen

A Leading IT Staffing, Custom Software and SaaS Product Development company founded in 2003. We offer a wide range of scalable, innovative IT Staffing and Software Development Solutions.

Contact Us

USA: +1 (971) 420-1700
Canada: +1 (971) 420-1700
India: +91 63807-80156
Email: contact@centizen.com

Centizen

A Leading IT Staffing, Custom Software and SaaS Product Development company founded in 2003. We offer a wide range of scalable, innovative IT Staffing and Software Development Solutions.

Twitter-logo
Linkedin
Facebook
Youtube
Instagram

Contact Us

USA: +1 (971) 420-1700
Canada: +1 (971) 420-1700
India: +91 63807-80156
Email: contact@centizen.com