h5禁止video标签自动全屏播放:
<video id="video" preload="auto" poster="images/v-video.jpg?x-oss-process=video/snapshot,t_50,f_jpg,w_400,h_350" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true">
<source src="file/video.mp4" type="video/mp4"/>
</video>
底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的。h5页面 input定位是fixed手机键盘出现遮挡输入框:bug重现如下图:
vue解决方法:
<!--html部分-->
<div class="footer" v-show="hideshow"></div>
// js 部分
data(){
return {
docmHeight: document.documentElement.clientHeight, //默认屏幕高度
showHeight: document.documentElement.clientHeight, //实时屏幕高度
hideshow:true, //显示或者隐藏footer
}
},
mounted() {
// window.onresize监听页面高度的变化
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
//监听
watch:{
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hideshow=false
}else{
this.hideshow=true
}
}
}
原生js解决方法:
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function () {
var thisHeight = $(this).height();
if ( winHeight - thisHeight > 140 ) {
//键盘弹出
$('.footer').css('position','static');
} else {
//键盘收起
$('.footer').css({'position':'fixed','bottom':'0'});
}
})