In iOS, how do I avoid the notch?

[rsamrry]

hi,
I want to make sure the canvas doesn’t go over the notch. now, my canvas is set for fit height, so I know the canvas will cover the entire screen. what I have done is have my graphics in a node which is a child of the canvas and I set the widget of that node in the following way:

var frameSize = cc.view.getFrameSize();
var visibleSize = cc.view.getVisibleSize();
var bgNode = cc.find(“Canvas/JOIN_BG”);

var topMarginPercentage = (frameSize.height - visibleSize.height)*1.0/frameSize.height;
var widgetComp = bgNode.getComponent(cc.Widget);
widgetComp.top = topMarginPercentage;
widgetComp.isAbsoluteTop = false;
widgetComp.updateAlignment();

this code is displaying the graphics in a way that avoids the notch , but starts much lower than the bottom line of the notch. first of all I would like to know if frame size and visible size are cocos design sizes or screen sizes. I have a feeling frame size is screen size and visible size is cocos design size, and that may be causing the problem.
need help!

[slackmoehrle]

Fitting elements on iPhone X (detect orientation)

Okay, I get it. The following settings can be made for iphoneX crossscreen game adaptations in cocoscreator. [image] Under Canvas, select Fix Hidth, which is an automatic adaptation width scheme that will make the game design resolution full of screen height, and then use the widget component for adaptation， [image] You can make the width of the background image larger to ensure the width of the entire screen