iPhone x 上下空一段怎么解决

Question

每个页面上下都空一段，颜色还不一样，，在模拟器和非iphone x真机上都没有这个问题，
就是在iphone x 真机上出现上下多出一段

如图框里就是多出来的

Answer 1

解决思路，上下设置两个div，进入页面判断是iPhone X时显示，不是iPhone X时隐藏

isIphoneX:function(){
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}