为什么H5会话页面有遮挡折叠？

有时会有访客反馈说手机网页打开对话页面遮挡，导致他无法回复客服的消息，这是为什么呢？

出现这种情况大概率是因为在手机浏览器中，地址栏会随滚动自动显示/隐藏，导致了页面的可视高度动态变化；而部分客户会直接用iframe把对话页直接嵌到自己的产品，设置的参数单位可能无法灵敏适配，因此导致了页面的遮挡。

常见的错误写法有：

/* ❌ vh 是固定值，不会随地址栏变化更新 */

iframe { height: 100vh; }

/* ❌ dvh 虽然是动态的，但老浏览器不支持 */

iframe { height: 100dvh; }

✅我们推荐的写法是：使用JavaScript 动态计算高度，兼容所有浏览器：

```html

<!DOCTYPE html>

<html>

<head>

<style>

body, html {

margin: 0;

padding: 0;

overflow: hidden;

}

</style>

</head>

<body>

function resizeIframe() {

var iframe = document.getElementById('chat-iframe');

iframe.style.width = '100%';

iframe.style.height = window.innerHeight + 'px';

iframe.style.border = 'none';

iframe.style.display = 'block';

}

resizeIframe();

window.addEventListener('resize', resizeIframe);

</script>

</body>

</html>

```

注意⚠️