响应式floatbox移动端丢失底部边距，火狐与Chrome视口值传递差异

1. 移动端margin-bottom无效问题 #

原因：当.floatbox设为position: absolute时，元素脱离文档流，margin-bottom无法像相对定位那样控制自身与底部的间距——绝对定位元素的位置由top/left/right/bottom属性主导，margin仅会在已定位的基础上偏移元素，无法自动留出底部空白，导致组件紧贴屏幕底部。

修复方案：改用bottom属性控制底部间距，同时移除无效的margin-bottom。修改响应式CSS如下：

@media only screen and (max-width: 600px) {
  .floatbox {
    position: absolute;
    transform-origin: left top;      
    transform: scale(calc(var(--currentViewportWidth) * 0.00176));
    top: calc(var(--currentViewportWidth) * 1px * var(--repositionFactor));
    left: calc(var(--currentViewportWidth) * 1px * var(--repositionFactor));
    bottom: calc(var(--currentViewportWidth) * 1px * var(--repositionFactor)); /* 新增底部间距控制 */
    margin-top: unset;
    margin-bottom: unset; /* 移除无效的margin-bottom */
  }
}

如果需要复用原有的边距比例逻辑，也可以将bottom值替换为calc(var(--currentViewportHeight) * 1px * var(--autoTopBottomMargin))，按需调整即可。

2. 跨浏览器视口宽度值差异问题 #

原因：window.innerWidth会包含浏览器滚动条的宽度，而Chrome和Firefox的默认滚动条宽度不一致（Chrome通常为15px，Firefox多为17px），导致传递给CSS的--currentViewportWidth变量出现明显差异；此外移动端部分浏览器中，window.innerWidth还可能受虚拟键盘、状态栏等因素干扰，稳定性较差。

修复方案：使用document.documentElement.clientWidth获取视口宽度，该值不包含滚动条，在各浏览器中表现一致。修改JS代码如下：

function detectViewport() {
  // 改用clientWidth获取不含滚动条的视口宽度
  let viewportWidth = document.documentElement.clientWidth;
  document.querySelector(':root').style.setProperty('--currentViewportWidth', viewportWidth);
  
  let viewportHeight = window.innerHeight;
  document.querySelector(':root').style.setProperty('--currentViewportHeight', viewportHeight);
}

额外建议给resize事件添加防抖处理，避免频繁触发计算：

let debounceTimer;
window.addEventListener('resize', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(detectViewport, 100);
});
// 页面加载时执行一次初始化
detectViewport();

内容的提问来源于stack exchange，提问作者shefulloflight