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

Fit to display in Iphone

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.

Fit to display in Iphonex

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 Viewport-fit=cover, in the index.html file.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”>

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.

Fit to display in Iphonex

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

<platform name=”ios”>

<splash height=”2208″ src=”res/icon/ios/launchimage-1242@3x~iphone6s-portrait_1242x2208.png” width=”1242″ />

<splash height=”1242″ src=”res/icon/ios/launchimage-1242@3x~iphone6s-landscape_2208x1242.png” width=”2208″ /> </platform>

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

iPhone X — 1125px × 2436px — 2436px × 1125px

Fit to display in Iphonex

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

Expertise

Cloud Computing
Analytics And Visualization
Internet of Things
AI & Machine Learning
Digital Transformation
Blockchain

Twitter
Linkedin
Facebook
Youtube
Instagram