Posts 横屏H5适配
Post
Cancel

横屏H5适配

横屏 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 的显示隐藏
  }
});
This post is licensed under CC BY 4.0 by the author.
Trending Tags

Trending Tags