一、ios手机fixed
在ios手机中对定位的fixed不友好，有时定位在底部的按钮会有时出现或不出现，这时可以考虑给父级设置最小高度，对按钮进行absolut
这样可以对fixed进行避免使用
二、ios手机input
在ios中，在input聚焦的时候会掉起手机的软键盘，这个时候可能会导致在底部弹起的软键盘影响页面的布局，可能会遮挡页面中其他的input，导致体验效果不好
解决方案：
1、在input聚焦的时候
document.getElementsByTagName('body')[0].style.height = (window.innerHeight + 0) + 'px';
document.body.scrollTop = 202;
2、在input失焦的时候
document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
三、ios手机软键盘
在ios中手机软键盘弹起再收回去之后可能会导致页面没有收缩回去（底部会有空白的效果），影响视觉效果，又或者页面正常但是一些按钮的位置实际上是错位了 导致无法点击影响用户体验
解决方案：
在input聚焦和失焦的时候
window.scroll(0, 0)
四、手机端video问题
在手机端的video列表播放中遇到的一些问题
1、ios手机在点击播放的时候第一帧会显示一个黑色的再开始播放，对于这种效果，可以在video的上边盖一层服务端提供的视频的第一帧的图片，这样可以避免ios手机播放会出现黑色的问题
2、手机端中视频列表过多的时候video的preload（预加载的问题）
（2.1）在android手机中这个预加载不需要添加，让他置为一个空字符串，如果添加就会导致第一个视频加载非常慢
（2.2）在ios手机中预加载则需要加上
preload=‘preload’
3、在手机端video标签过多会导致非常卡，优化方案：
（3.1）加分页功能
（3.2）在video标签上加上
v-if="index === video_index"
当，当前的索引值index等于定义的变量的时候才进行加载，在data中定义
video_index：-1
在点击播放按钮的时候设置让
this.video_index = index，
（一开始一个video都不进行加载，只到了点击当前的才加载当前的video标签，可以进行优化页面的质量）
4、在video列表进行播放的时候，会出现点击第一个视频可以正常播放，点击第二个视频的时候需要点击第二次才可以播放，并且会报错，这是因为点击的时候触发了两次的暂停事件，（第一次）在点击当前的视频需要暂停掉所有的视频（第二次）自己有写了一个监听视频的暂停事件所以会导致出现错误，解决方案：
<video @click.prevent.stop="stop(index)" @pause="pause(index)" @play="play(index)" @ended="end(index)">
<source src=""></source>
</video>
（4.1）点击开始播放的时候=>
this.before_index = index // 记录上一次点击的index
this.video_index = index // 让video_index和index相等就会加载对应的video标签
var video = this.$refs.videoLabel[0] //找到当前的video标签
video.play() // video的播放事件
（4.2）pause是监听暂停事件，点击暂停：=>
//这里需要判断上一个点击的===当前的index的时候才执行暂停的逻辑，要不然就会出现上边提到的点击两次的问题
if(this.before_index === index) {
this.video_index = -1
}
（4.3）stop是点击视频进行暂停事件=>
this.video_index = -1
（4.4）ended是监听视频播放完毕事件=>
this.video_index = -1
附：
1、检查手机是否是在连接网络的状态
navigator.onLine
2、检查手机是ios还是android
var u = navigator.userAgent;
var app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //ios终端
var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
3、检查是否是微信环境
var isWeiXin = /micromessenger/i.test( window.navigator.userAgent );
网友评论