兼容问题（H5）总结

兼容问题（H5）总结

[0] video 标签的兼容

• 问题描述

  使用video标签时在ios和Android上存在不同的兼容问题，ios是点击播放会全屏播放，安卓会有层级过高的问题

• 解决方案

添加不同的属性进行兼容处理

//ios方案 
<video
autoplay
controls
:src="xxxx.mp3"
playsinline="true"
webkit-playsinline="true"
x5-playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-play-fullscreen>
</video>

//Android方案
<video
autoplay
controls
:src="xxxx.mp3"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-play-fullscreen>
</video>

注意：webkit-playsinline="true" x5-playsinline="true" 安卓不要添加这俩个属性否则会有层级高的问题

[1]关于fixed定位在ios上不生效的问题

• 问题描述

在抽屉组件中使用了fixed定位后，抽屉弹出时，使用定位的button按钮，在ios上不显示

• 解决方案

解决方案 1.使用绝对定位替换相对定位 2. 注意不要将需要定位的元素（比如本次的button）与会滚动的区域写在一起

<div>
	<div class="main">
	 中间内容可能滚动
	</div>
    <div class="footer">
    <button>吸底按钮</button>
    </div>
</div>

<style>
// 注意：此方案父元素不要定位
.main {
height: 90%; //高度设置百分比可自适应
width：100%；
margin-bottom: 30px; // 底部留白
overflow-y:auto; // y轴滚动
-webkit-overflow-scrolling: touch;
}

.footer {
position: absolute； 
}