浏览器不支持AR时隐藏Google Model Viewer AR预览按钮及跨端按钮适配问题

问题原因 #

iOS 环境下 <model-viewer> 会优先调用系统原生 AR Quick Look 能力，嵌套在标签内部的非指定 slot 元素不会被渲染到画布层，因此直接写在标签内的加入购物车按钮仅安卓端可正常显示，iOS 端无法识别。

解决方案 #

1. 无AR能力的浏览器自动隐藏AR预览按钮

可直接通过 <model-viewer> 自带的 ar-status 属性做CSS匹配，无需额外写JS逻辑：

/* 仅AR能力支持时显示AR预览按钮 */
model-viewer:not([ar-status="supported"]) #ar-preview-btn {
  display: none !important;
}

如果需要更灵活的逻辑控制，也可以监听属性变化事件实现：

const modelViewer = document.querySelector('model-viewer');
const arBtn = document.getElementById('ar-preview-btn');
modelViewer.addEventListener('ar-status', (e) => {
  arBtn.style.display = e.detail.status === 'not-supported' ? 'none' : 'block';
});

2. 双端适配自定义加入购物车按钮

不要将按钮放在 <model-viewer> 标签内部，改为在外层加相对定位的父容器，按钮用绝对定位叠在画布上方，即可实现双端正常显示：

<div class="model-wrapper" style="position: relative; width: 100%; height: 500px;">
  <model-viewer
    src="你的模型文件路径.glb"
    ar
    ar-modes="webxr scene-viewer quick-look"
    style="width: 100%; height: 100%"
  >
    <!-- 自定义AR按钮需加官方指定slot属性，自动绑定AR触发逻辑 -->
    <button id="ar-preview-btn" slot="ar-button">在你的空间查看</button>
  </model-viewer>
  <!-- 加入购物车按钮外置，通过定位叠放 -->
  <button id="add-cart-btn" style="position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; padding: 12px 24px;">加入购物车</button>
</div>

该方案不受 <model-viewer> 内部渲染逻辑影响，双端均可正常渲染，自定义样式也不会受框架限制。

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