雨见系列浏览器主页适配文档

适配效果图片展示：

图片仅做展示，侵联删625197595@qq.com

为实现良好的主页适配浸润效果，您只需要三行代码即可完成适配，适配原理：浏览器在主页模式下加载您的页面时，会尝试调用window.rainseeHomeEvent，并传递安全区域的值给网页。您只需要在您的页面中加入如下代码即可快速适配。感谢您对完美主义的支持。

通用js:

window.rainseeHomeEvent = function(top,bottom){
//top 代表距离顶部的高度，bottom代表距离底部的高度
document.querySelector("body").style.padding = `${top}px 0 ${bottom}px 0`;
}

vue：

mounted() {
// 在组件挂载后注入全局方法
let that = this;
window.rainseeHomeEvent = function (top, bottom) {
//在这里作用您的响应式组件，注意要用that;
};
},

如果您不方便处理网页高度，可以使用毛玻璃方案

window.rainseeHomeEvent = function(top,bottom){
function addBottomFrostedDiv(height) {
  const h = (typeof height === 'number') ? `${height}px` : height;
  let div = document.getElementById('bottom-frosted-div');

  if (!div) {
    // 第一次调用才创建
    div = document.createElement('div');
    div.id = 'bottom-frosted-div';
    Object.assign(div.style, {
      position: 'fixed',
      left: '0',
      right: '0',
      bottom: '0',
      background: 'rgba(255, 255, 255, 0.6)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      zIndex: '9999',
      boxSizing: 'border-box'
    });
    document.body.appendChild(div);

    // 记录 body 原始 padding-bottom
    const prevPadding = window.getComputedStyle(document.body).paddingBottom;
    if (!document.body.dataset._origPaddingBottom) {
      document.body.dataset._origPaddingBottom = prevPadding;
    }
  }

  // 更新高度
  div.style.height = h;
  document.body.style.paddingBottom =
    `calc(${document.body.dataset._origPaddingBottom || '0px'} + ${h})`;

  return div;
}
addBottomFrostedDiv(bottom);
}