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.

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.

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.

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.

IT Staffing
General Staffing
Remote Hiring

Products

ZenBasket
Zenyo Payroll
Zenyo Workforce

Company

About Us
Why Us
Case Studies
Blogs
Careers
Client Referral
Affiliate Program
Contact Us

Software Engineering

Software Development
Product Development
DevOps Engineering
Digital Experience Design
Quality Engineering & Testing
Cloud Development Services
Tech Stack

Contact Us

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