1、添加meta viewport标签

<meta name="viewport" content="width=device-width, viewport-fit=cover">

2、ios 11.1以下使用constant ,以上使用env，底部fix元素添加如下css属性

.fixed{ 
    box-sizing:content-box;
    padding-bottom: constant(safe-area-inset-bottom)!important;
    padding-bottom: env(safe-area-inset-bottom)!important;
}

使用 @supports 隔离兼容样式，完整代码如下

//假设meta标签已存在　
const meta = document.querySelector('meta[name=viewport]');
const content = meta.getAttribute('content');
meta.setAttribute('content',content + ',viewport-fit=cover');

const head = document.querySelector('head');
const styleEle = document.createElement('style');
styleEle.type = 'text/css';
const style = `
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
        ${fixedEle}{
            box-sizing:content-box;
            padding-bottom: constant(safe-area-inset-bottom)!important;
            padding-bottom: env(safe-area-inset-bottom)!important;
        }
    }`;
styleEle.appendChild(document.createTextNode(style));
head.appendChild(styleEle);

参考:凹凸实验室 、 优设