On the H5 page, the Apple phone blocks the content when using fixed to locate the bottom of the tabbar

In the use of uni-app when , I wrote a bottom tabbar The navigation bar , There is tabbar The problem of blocking content , As shown in the figure below ;

 

At the beginning , Top box used padding-bottom Open the bottom box when you come , stay chrome View in browser , The effect is correct

But what? ！！！

Once there is more task data , There will still be occlusion problems , And the occlusion problem is ios That is to say, opening the browser on Apple mobile phone does not achieve the desired effect ;

Baidu has queried documents for many times , No feasible solution has been found , Finally, the questions raised in the wechat Technology Group , It's OK , Three technology groups are just one of the eight classics that can give you answers , The rest is to ask you to go to Baidu ;

The solution is as follows

It's also very simple , But for me, a little white , It's been solved for a long time ;

Look at your layout

My layout is that the content part is a box , Bottom tabbar It's a separate box , Then it was wrapped in a big box ;

<div>
        <div> Content </div>
        <tabbar> The navigation bar </tabbar>
    </div>

Because I use uni-app Written , Here is a rough list

In this layout , Use pseudo elements in the content section ：：after{  }

Give the height of pseudo elements to and tabbar Of the same height , This opens the entire bottom box , That's it ios page tabbar The navigation bar is blocked ！

It was a really good experience .