0

I have faced the issue with the notch on iPhone X and I solved with just CSS. However, I am having a problem with this button tab. It would be nice if I can extend the button width until the end of the screen or just put the grey area white.

Simulator iPhone X

ionic 3 Angular 4 xCode/Simulador: Version 10.1

Guilherme Felipe Reis
  • 773
  • 13
  • 26
  • is your screenshot what you want to acheive ? – Mehdi Nov 23 '18 at 14:05
  • @Mehdi I want to extend the page until the end of the screen, The tab buttons still in the same place, but the small part that is a little grey, be fully white. I don't find a way to colour it with CSS. – Guilherme Felipe Reis Nov 23 '18 at 19:30

2 Answers2

1

Ok, so I just found a way to deal with this:

First, you need to identify that the device is an IphoneX like so: In your app.component initialize a variable that you store in a new or existing service that handles global settings for example:

export class MyApp {
   //...
   constructor (
   //...
   private settingsService: SettingService
   ) {
   //...
   const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
    // Get the device pixel ratio
    const ratio = window.devicePixelRatio || 1;

    // Define the users device screen dimensions
    const screen = {
      width : window.screen.width * ratio,
      height : window.screen.height * ratio
    };

    // iPhone X Detection
    if (iOS && screen.width == 1125 && screen.height === 2436) {
      // Set a global variable now we've determined the iPhoneX is true
      this.settingsService.isIphoneX = true;
    }
   }
}

The above code is not mine, I couldn't find a reference to the original author. He or she will recognize themselves. Anyway, once you have this code operating, you can add the following in the page you which display within the safe area .

First, declare a css class hierarchy in the variables.scss 

*.display-in-safe-area-iphonex{
   .scroll-content{
      margin-bottom:30px;
      margin-top: 40px;
   }
}

Then inject that settingService in the desired page and palce this ngClass within the ion-content tag of your page like so:

<ion-content [ngClass]="{'display-in-safe-area-iphonex': settingService.isIphoneX}">
<!--    content            -->
</ion-content>

I have found that 40px for the upper notch and 30px for the bottom bar work nicely.

Mehdi
  • 2,263
  • 1
  • 18
  • 26
0

You need to set UIEdgeInsets for your web view to stretch all the way to bottom (covering the notch).

You can achieve this by creating a subclass of WKWebView!

Check this! out.

Rahul Joshi
  • 71
  • 1
  • 6