iphoneX及以上手机底部适配
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);
1条评论
刷单快递单号网站www.chaojidanhao.cn