IPhone X and viewport-fit=cover

mobile
1

Did anyone got it working with Meteor 1.5 / 1.6?

I didn’t succeed with adding it to existing Meteor 1.5 project. The only way was to manually edit generated html files in XCode and that’s not a way for a production use.

I didn’t succeed with it also with fresh Meteor 1.6.0.1 project. That’s how relevant part of my client/main.html file looks like:

<head>
  <title>iphone-x-test</title>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, viewport-fit=cover">
</head>

The generated project html files are a mess. There are two directives. There are multiple copies of files in different places. There are strange head.html files…

I’ve uploaded 1.6 project to github: https://github.com/dmitry-sher/meteor-iphone-x-test
It’s just a freshly made Meteor project with the metatag added.

What is the proposed way now for Meteor projects to work with design changes in IPhone X, for 1.6 and for 1.5 (we do not have plans and budget right now to upgrade)?

2

The secret was to add the right splash screen to the app. In your mobile-config.js, add this line:

App.appendToConfig(`
  <splash src="../../../private/images/mobile/Default@3x~universal~anyany.png" />
`);

The image itself has to be 2208x2208.

I have no idea why this affects the viewport size, but it worked for me since I added this splash screen in addition to setting the viewport via the <meta> tag.

Credits go to @bmanturner: https://github.com/meteor/meteor/issues/9208#issuecomment-339325536

It’s now also mentioned in the Meteor guide:

There was also a thread somewhere where someone mentioned CSS constants that will provide the “safe corners” paddings. But I couldn’t find it. Not sure if it was in these forums or one of the other issues on Github related to iOS 11 / iPhone X.

5 Likes
3

So helpful, thanks! I updated meteor to get viewport-fit but this clued me in that I also needed the magic of a universal splash screen. Note that the latest Cordova docs indicate the image should be 2732x2732: http://cordova.apache.org/docs/en/7.x/reference/cordova-plugin-splashscreen/index.html#single-image-launch-screen

4

Glad it helped. Yes, there are two different sizes you can set, but the 2208 worked for me on the iPhone X.