Small program Suction bottom button fit iPhone X scheme

With the 23rd batch of iphone x arriving, around the tyrants have to use up, because the iphone x Liu Qi caused by a lot of adaptation problems, so this group of tyrants more immersed in a variety of find bugs, as expected, the Pea Princess applet in some places also appeared a lost experience bad place, Mainly is the Product Details page and the shopping cart's suction bottom button bar, will overlap with the home indicator horizontal bar, like this, when clicks the bottom button very easily to trigger the gesture operation, the following figure:

It was a bug that had to be fixed, it was an experience problem that had to be optimized, and then an iphone x started to study. The suitability of the web side is fine, with viewport meta tags and the following solutions. Refer to Here

{
  position:fixed;
  bottom:0;
  width:100%;
  Height:constant (safe-area-inset-bottom);
  Background-color: #fff;
}

But more embarrassing, the performance from Four Corners can be inferred in the small program Viewport-fit default for cover (according to performance guessing), but there is no interface to change, so the web end through the Viewport-fix=cover combined constant ( Safe-area-inset-bottom); The appropriate formula case is not suitable for small procedure. At present, there is no small program has a special interface or field for the iphone x and other profiled screens.

The small program itself's bottom tab bar for the iphone x fitness is simply added a white bottom bar, improve the original tab bar position, why say so. Because this can be seen from our shopping cart page, the shopping cart page Suction Bottom operation is not through the position:fixed;bottom:0, but based on the height of the windowheight-to calculate the top value, thus simulating the suction bottom, After the new version of the applet itself fit the iphone x, causing the bottom button of the shopping cart to be covered by half, the above conclusion (the same as guessing).

Anyway, since there is no special scheme to get the value, we can only get the device information through the Wx.getsysteminfo interface, which uses the following method:

Wx.getsysteminfo ({
  success:function (res) {
    console.log (Res.model)
    console.log (res.pixelratio)
    Console.log (res.windowwidth)
    console.log (res.windowheight)
    console.log (res.language)
    Console.log ( res.version)
    Console.log (res.platform)
  }
)

Which model is the device model and other information, if the model contains the iphone x, you can think that the device for the iphone x, we are in the import file App.js to detect, but in the global Add a ISIPX field, the results to isipx.

The value can be read in a subpage, and the chestnut of the Product detail page:

<!--goods.wxml-->

<view class= "Button-group {isipx?" Fix-iphonex-button ': '} ' > This is a suction bottom button area </view> 
//goods.js let
app = Getapp ();
Page ({
    data: {
        isipx:app.globaldata.isipx?true:false
    }
}})/
* APP.WXSS/
. Fix-iphonex-button {
    bottom:68rpx!important
}
. Fix-iphonex-button::after {
    content: ';
    position:fixed;
    Bottom:0!important;
    Height:68rpx!important;
    width:100%;
    Background: #fff;
} 

So a simple plan to fit the iphone x bottom fillet is done. As for why 68rpx, because the iphone x and iphone 6 screen width is 375px, small program 750rpx = 375px = 750 physical pixels, combined with the following two diagram to explain the reason:

Finally, the IPhone x trench can scan the following small code for experience, welcome to make a brick

The author of this article: Zhuang Zhuang
Original address: Small program in the suction bottom button fit iPhone X scheme