#XcodeSimulator

[centizen]

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 ClipboardSyntax Highlighter

1Viewport-fit=cover

2​

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 ClipboardSyntax Highlighter

1<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.

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 ClipboardSyntax Highlighter

1<platform name=”ios”>

2​

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

4​

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

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