The introduction

IPhoneX has been released so far has nearly a year of time, all kinds of app are more or less done to iPhoneX adaptation, that for our H5 page to do what aspects of adaptation?

Start with the concept of safe areas, which ensure that content is properly embedded on the device without being blocked by status bars, navigation bars, and so on.

Apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

— by Apple’s Human Interface Guidelines

Figure 1

For H5 pages, it is usually opened in a “container” such as a browser or app webview, which usually does something like this:

Figure 2

As you can see, these containers keep the top of the page in a safe zone, while the bottom fills the screen for a full screen experience.

In the case of landscape browsing, we just need to adapt the bottom navigation

As shown below, the danger zone at the bottom of the iPhoneX is 34pt high, corresponding to the @3x page pixel value of 102px. We can adapt the bottom navigation based on this value.

Figure 3

Bottom navigation ADAPTS three methods

1. Basic implementation of JS


     
    
      
  1. var isIphoneX = window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && testUA('iPhone')
    2. 
      
  2. if (isIphoneX) {
    3. 
      
  3.   document.body.classList.add('fix-iphonex-bottom')
    4. 
      
  4. }
    5. 
      
  5. function testUA (str) {
    6. 
      
  6.   return navigator.userAgent.indexOf(str) > -1
    7. 
      
  7. }
    8. 
     
Copy the code

     
    
      
  1. .fix-iphonex-bottom .navi[data-v-539b7842]{
    2. 
      
  2.   padding-bottom: 34px;
    3. 
      
  3. }
    4. 
     
Copy the code

The demo:

2. Js dynamic adaptation

As shown in Figure 2, for browsers with bottom bars, we can make a dynamic adaptation when the bottom bar is shown or hidden during page scrolling:


     
    
      
  1. var isIphoneX = window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && testUA('iPhone')
    2. 
      
  2. if (isIphoneX) {
    3. 
      
  3.   check()
    4. 
      
  4.   window.onscroll = throttle(check, 200)
    5. 
      
  5. }
    6. 
      
  6. function check () {
    7. 
      
  7. // Handle lib-flexible enlarging viewPort
    8. 
      
  8.   var scale = window.innerWidth / window.screen.width
    9. 
      
  9. // Some browsers will show/hide the toolbar when scrolling, which affects the viewport height. Do not fix the iPhoneX with the bottom toolbar. 100 is the empirical value
    10. 
      
  10.   if (window.screen.height - window.innerHeight / scale < 100) {
    11. 
      
  11.     document.body.classList.add('fix-iphonex-bottom')
    12. 
      
  12.   } else {
    13. 
      
  13.     document.body.classList.remove('fix-iphonex-bottom')
    14. 
      
  14.   }
    15. 
      
  15. }
    16. 
      
  16. function testUA (str) {
    17. 
      
  17.   return navigator.userAgent.indexOf(str) > -1
    18. 
      
  18. }
    19. 
     
Copy the code

Effect:

 demo:

3. Pure CSS implementation

In order to handle any adjustment that may be required iOS 11’s version of Safari includes some constants that can be used when viewport-fit=cover is being used.

  • safe-area-inset-top

  • safe-area-inset-right

  • safe-area-inset-left

  • safe-area-inset-bottom

The above variables are provided to better match safari on IOS 11. Viewport-fit =cover can be used in the CSS.

First, set the meta tag


     
    
      
  1. < meta name = "viewport" content = "initial - scale = 1, viewport - fit = > cover"
    2. 
     
Copy the code

We can then use constant() (IOS 11.0-11.2) or env() (>IOS 11.2) to reference the above variable


     
    
      
  1. .selector{
    2. 
      
  2. /* Using the CSS fallback mechanism, the following code is compatible with both versions */
    3. 
      
  3.   padding-top: env(safe-area-inset-top);
    4. 
      
  4.   padding-top: constant(safe-area-inset-top);
    5. 
      
  5. }
    6. 
     
Copy the code

If you need to calculate based on these variables, you can write:


     
    
      
  1. .selector{
    2. 
      
  2.   --safe-area-inset-bottom: env(safe-area-inset-bottom);
    3. 
      
  3.   height: calc(80px + var(--safe-area-inset-bottom));
    4. 
      
  4. }
    5. 
     
Copy the code

Note that the actual pixel value of the safe-area-inset-bottom variable is fixed (about 34px) and will be recalculated if we scale the page. For example, in our project, we used flexible layout with mobile. On iPhoneX, the actual width of the page is 1125px, so the security zone at the bottom of the page should be 3 times as high:


     
    
      
  1. .selector{
    2. 
      
  2.   padding-bottom: calc(env(safe-area-inset-bottom) * 3);
    3. 
      
  3. }
    4. 
     
Copy the code

demo:

conclusion

There is nothing wrong with the js implementation except that it is not elegant enough, while the CSS implementation has compatibility issues because it relies on safari in ios11 (test found that qq browser with AppleWebkit/604.3.5 kernel is not supported, other browsers are normal. Specific compatible to which version has not been found relevant information)

All demo address: https://marvinxu.github.io/demos/

References

  1. iPhone X – Overview – iOS Human Interface Guidelines

  2. Understand iPhoneX design size and fit in 3 minutes

  3. “The Notch” and CSS

  4. Designing Websites for iPhone X

  5. IPhone X Layout Features with CSS Environment Variables

  6. CSS Round Display Level 1