Hi I’ve been trying for hours to get my index.html (built with hype 4) to display correctly on the iPhone X screen.
Initially I referenced my index.html (in my X code project) from the View Controller.swift which displayed the index only within the safe areas of the screen with white bars above and below the content.
I then added :
<meta** name **=** "viewport" content **=** "width=device-width, initial-scale=1.0, viewport-fit=cover" **>**
to the head of the hype generated html document which fixed the top white bar but added more white space to the bottom of the screen.
Interestingly, when I flip the iPhoneX’s orientation from vertical to horizontal and then back to vertical the problem is solved and the index fills the entire screen! Although this is obviously not optimal lol.
It’s important when setting up flexible layout properties on a group that the group is the same width + height as the scene area (the viewport). It looks like your top level group that you have Flex properties applied is in a weird spot which might be causing this issue. I can’t open the Xcode file from the Xcworkspace file you shared, I would need the Xcodeproj.
Hi Daniel, my bad…Here is the Xcodeproj: meandermedia.xcodeproj.zip (27.9 KB)
(I hope you can open it without the rest of the assets, ie (that’s why I uploaded the xcodeworkspace before)
In terms of the group in the hype document, I changed the dimensions to fit the viewport here: index.hype.zip (2.4 MB)
however I believe this is a different problem and did not have any effect on getting the hype.html document to be full screen on an iPhone X.
Stackoverflow usually produces nuggets like this after an hour of gunk.
I wonder if @jonathan wouldn’t consider adding this option in the already plentiful settings. Maybe only reveal a checkbox for 100vh if a user selects “web app”?
I’ll make a note of this; there could definitely be compatibility issues but I’ll investigate further.
I recently went through my own issues with getting pages to display correct with viewport-fit:cover in Hype Reflect. I think this is pretty buggy on Apple’s part and I had to do a workaround mentioned here:
