As the world eagerly awaits the release of Apple's new flagship iPhone X, developers are anxious that their mobile sites will look good on the device because of the notch. The phone's super-retina OLED screen covers the entire face of the phone, except for the "notch" where the camera and other various components are situated. This results is some awkward situations for screen design, like constraining websites to a "safe area" and having white bars on the edges.
viewport-fit
Apple took this concern into account when they released iOS 11. The WebKit team at Apple gave us a way to control this behavior via the viewport meta tag and by implementing CSS constants that are set by the system and cannot be overridden. The viewport option we’ll be looking at is viewport-fit and its three possible values:
- contain: The viewport should fully contain the web content. This means position fixed elements will be contained within the safe area on iOS 11.
- cover: The web content should fully cover the viewport. This means position fixed elements will be fixed to the viewport, even if that means they will be obscured by the notch. This is the same behavior we had on iOS 10.
- auto: The default value, the same as contain.
To restore your header bar to the very top of the screen, behind the status bar like it was in iOS 10, you’ll want to add viewport-fit=cover to your viewport meta tag. With the Genesis Framework, this is simple. There's already a filter for changing the output of the viewport meta tag. Add this code to functions.php:
1 2 3 4 | add_filter( 'genesis_viewport_value', 'iphonex_viewport' ); function iphonex_viewport( $content ){ return "width=device-width, initial-scale=1, viewport-fit=cover"; } |
The CSS Constants
You're probably familiar with CSS variables, but CSS constants? CSS constants can be accessed by the constant() function in CSS, which has been proposed to the CSS Working Group for standardization. Four layout guide constants have been implemented in Safari for iOS 11 to add safe areas for the notch.
The 4 layout guide constants are:
- constant(safe-area-inset-top): The safe area inset amount (in CSS pixels) from the top of the viewport.
- constant(safe-area-inset-bottom): The safe area inset amount (in CSS pixels) from the bottom of the viewport.
- constant(safe-area-inset-left): The safe area inset amount (in CSS pixels) from the left of the viewport.
- constant(safe-area-inset-right): The safe area inset amount (in CSS pixels) from the right of the viewport.
These CSS constants can be added to margin, padding, or absolute position values such as top or left. In most cases, when you are using viewport-fit=cover, to achieve the desired results you can just add the following to the body tag in your child theme's style.css:
1 | padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); |
Apple’s final gift to us is that these constants have also been backported to UIWebView.
Leave a Reply