How to create a full screen iPhone x layout

Mobile
1

I need to make a multi-layout file for iOS devices, but I can only find iPhone 6 Plus in Hype 3’s built-in layout. This layout works fine on iPhone 8 and iPhone 8 Plus, but it can’t be full screen when it runs on iPhone X.

I tried to modify the width and height of the layout in multiple scales, but the page always only occupies a part of the middle of the screen, with a black screen on the top and bottom.

IMG_996C9105F81C-1
IMG_996C9105F81C-1.jpeg828×1792 911 KB

How can I design a full-screen layout under iPhone X? Thank you very much.

“0102”test.hype.zip (394.1 KB)

2

You’ll probably want to look at the Flexible Layout system. By setting pins and resizing options on individual elements, you can control how they scale in response to different browser widths/heights.

(An easy was to get simple scaling with this is to put everything in a group, and then have that group turn on all pins/scale options, check “zoom contents” and scale with shrink to fit.)

1 Like