移动端开发过程中的踩坑记录
H5适配iPhoneX系列
众所周知，底部黑条，顶部刘海，适配方式如下：
1
2
3
body {
padding-bottom: env(safe-area-inset-bottom);
}
使用前提：
1
<meta content="viewport-fit=cover"/>
video 标签相关
属性相关介绍；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<video
controls
muted
style="object-fit:fill"
webkit-playsinline="true"
x-webkit-airplay="true"
playsinline="true"
x5-video-player-type="h5"
x5-video-orientation="portraint"
x5-video-player-fullscreen="true"
preload="auto"
></video>
<!--
object-fit: fill 视频内容充满整个video容器
poster:"img.jpg" 视频封面
autoplay： 自动播放
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
muted：当设置该属性后，它规定视频的音频输出应该被静音
webkit-playsinline playsinline: 内联播放
x5-video-player-type="h5" : 启用x5内核H5播放器
x5-video-player-fullscreen="true" 全屏设置。ture和false的设置会导致布局上的不一样
x5-video-orientation="portraint" ：声明播放器支持的方向，可选值landscape 横屏,portraint竖屏。
默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，
但是这个属性需要x5-video-player-type开启H5模式
-->
实际真机测试中发现，如果不加上playsinline这几个属性，在微信上会出现手机操作系统接管播放器的情况，加上了之后就只会呈现出标准的video标签的操作栏。
- object-fit: fill 视频内容充满整个 video 容器
- poster:”img.jpg” 视频封面
- autoplay： 自动播放，可选值：auto：当页面加载后载入整个视频；meta：当页面加载后只载入元数据；none：当页面加载后不载入视频
- preload：预加载（如果设置了 autoplay 属性，则忽略该属性），可选值：auto：当页面加载后载入整个视频；meta：当页面加载后只载入元数据；none：当页面加载后不载入视频
- muted：当设置该属性后，它规定视频的音频输出应该被静音
- webkit-playsinline playsinline: 内联播放
- x5-video-player-type=”h5” : 启用 x5 内核 H5 播放器
- x5-video-player-fullscreen=”true” 全屏设置。ture 和 false 的设置会导致布局上的- 不一样
- x5-video-orientation=”portraint” ：声明播放器支持的方向，可选值 landscape 横屏,portraint 竖屏。默认值 portraint。无论是直播还是全屏 H5 一般都是竖屏播放，但是这个属性需要 x5-video-player-type 开启 H5 模式
资源预加载
处理图片比较多的情况时，我们一般会加入loading页，为了让用户更快的能看到主页面，不至于 loading 太久，一般会预先加载部分静态资源，有选择的先加载前面的资源，会降低用户的等待时间。代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="num animated fadeIn">0%</div>
<script>
var imgList = ['src/img/xx.jpg', '...'],
num = document.querySelector('.num'),
len = imgList.length,
n = len;
for (let i = 0; i < len; i++) {
var img = new Image();
img.src = imgList[i];
img.onload = function () {
n--;
num.innerHTML = parseInt(((len - n) * 100) / len) + '%';
if (n === 0) {
// $('.loading').fadeOut(500);
// $('#wrap').css({ opacity: '1' });
}
};
}
</script>
![](./img/icon_wechat.png"){kind=icon}