# iPhone-X

With the new design of the screen in the iPhone-X models, Cordova and PhoneGap apps no longer fill in the entire screen. The first step in resolving this issue is to add a new value to the viewport meta tag. viewport-fit=cover is the new value we need to add.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>

1
2
3
4

Once this has been done, the background will fill the extra space at the top and bottom of the screen. This is great for the background but it can cause some issues with the content. We still want to create some space between the content and the notch at the top.

IOS 11+ provides 4 constant values that can be used in the CSS as values for the padding or margin properties. They denote how to use the space around the new notch in the iPhone-X. Two get used in portrait mode and two get used in landscape mode.

safe-area-inset-top
safe-area-inset-bottom
safe-area-inset-right
safe-area-inset-left

1
2
3
4

Here is an example of the environmental constants in use.

.page {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(
      safe-area-inset-bottom
    ) env(safe-area-inset-left);
}

1
2
3
4
5

# Resources and References

Here are a couple links that talk about the solution and related properties.

Stephen Radford article (opens new window)

PhoneGap Blob article (opens new window)

Alpha Software article (opens new window)

MDN env() reference (opens new window)

CanIUse env() reference (opens new window)

Return to week Homepage