横屏 H5 有些坑。
解决方法
有无解锁竖屏锁定,手机横向时可以浏览。
横竖屏适配
1
2
transform-origin: 0 0 0;
transform: rotate(90deg) translateY(-clientWidth);
使用 API 来判断屏幕的横竖屏情况
1
2
3
window.matchMedia("(orientation: portrait)");
// 返回一个 match 的情况,如果是横屏就不处理,如果是竖屏,就采用上一步的【横竖屏适配】方案
音频控制
应对 IOS 系统不支持自动播放的情况,借助微信的 WeixinJSBridgeReady 事件。
视频控制
视屏没有播放,会有黑屏的情况。
1
2
3
4
5
6
7
8
9
$("video").hide();
$("video").on("timeupdate", () => {
let $this = $(this);
if ($this[0].currentTime > 0) {
// 处理真实的 video 的显示隐藏
}
});