学会一个前端的坑。

我想在浏览器里做一个语音对话，用户说一句，然后浏览器采集声音，发给后端，接收到 wav 格式的音频响应，播放出来。
很简单的需求，通过鞭挞 AI 十分钟就写完了。但是实际调试的时候发现，PC 上很好没问题，ios 上无论是 Chrome 还是 Safari 都磕磕碰碰的很难用。

经过一番摸索，基本上确认了两个坑：

1. 手机触屏上，响应长按事件，不会触发 mousedown/mouseup 事件，而是要绑定 touchstart/touchend 事件。
2. 手机对音频的权限管理极为苛刻，原则上禁止 js 自动播放音频，必须是用户手动触发。

尤其是第二条，严格地说，每一个音频，都需要以 audio HTML element 的形式显示到页面上，然后由用户亲自按下播放键才能播放。无论是你代为点击，还是使用 autoplay 都是不行的，否则就只会有一个大写的 ERROR。但这个也没那么绝对，交互过一次后，下一次再用就可以自动播放了，感觉有一点玄学。

有专业的朋友也欢迎帮忙指点一下。 #FE

https://stackoverflow.com/a/72245072/2368737

学会一个前端的坑。如果你把高度设置为 100vh 试图占满浏览器的高度，这在桌面上没问题。

但是在手机浏览器上，浏览器的 navigator（地址栏）会占掉一点高度，而这个高度不会计算在 vh 里，结果就是你的 document 的实际高度会超出浏览器里的可视高度，然后你的页面就会在垂直方向上变成滚动（或者被截断，如果你将 overflow 设置为 hidden）。

这个恶心的现象在桌面版的 Chrome DevTools 里也无法调试，因为 Toggle Device Toolbar 模拟的 mobile 页面并不会包含 navigator。

在现代浏览器上，应该使用 svh 来获取 navigator 下方的，真实的页面可视高度。实测在最新版的 ios safari 和 chrome 上都可使用。
https://caniuse.com/?search=dvh
#FE