為什麼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>

```

注意⚠️