Target iPhone X

Ionic Framework ionic-v3
1

I’m trying to style my toolbar with tabs to have some padding on the bottom to accommodate for the iPhone X Home Indicator.

Is there a way I can target only the iPhone X?

2

Did you checked the body css class when run it in iPhone X, I think ionic will add an specific class for this device, run it in device or emulator and check the body element and search for a class that is specific for iPhone X.

3

I just found this codepen that shows how to detect iPhone X in javascript, tested it in chrome device simulator and it worked.

4

I see

app-root app-root-ios ios platform-cordova platform-mobile platform-ios platform-ios11 platform-ios11_0 platform-

None of which seems specific to the iPhone X

5

Yep, see the latest reply, the codepen I mentioned works perfectly :wink:

The entire code is:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var ratio = window.devicePixelRatio || 1;
var 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
	window.iphoneX = true;

	// Adds a listener for ios devices that checks for orientation changes.
	window.addEventListener('orientationchange', update);
	update();
}

function update() {
	notch();
	iphoneXChecker();
}

// Notch position checker
function notch() {

var _notch = '';
    if( 'orientation' in window ) {
      // Mobile
      if (window.orientation == 90) {
        _notch = 'left';
      } else if (window.orientation == -90) {
        _notch = 'right';
      }
    } else if ( 'orientation' in window.screen ) {
      // Webkit
      if( screen.orientation.type === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.orientation.type === 'landscape-secondary') {
        _notch = 'right';
      }
    } else if( 'mozOrientation' in window.screen ) {
      // Firefox
      if( screen.mozOrientation === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.mozOrientation === 'landscape-secondary') {
        _notch = 'right';
      }
    }

    window.notch = _notch;
}

function iphoneXChecker() {
  if (window.notch == 'left') {
    document.body.classList.remove('notch-right');
    document.body.classList.add('notch-left');
  } else if (window.notch == 'right') {
    document.body.classList.remove('notch-left');
    document.body.classList.add('notch-right');
  } else {
    document.body.classList.remove('notch-right');
    document.body.classList.remove('notch-left');
  }
}