移动端H5页面踩坑记

移动端的样式问题

1. 安卓 font-weight:700;以上才被认为是加粗。

2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞？

.user .chose_file {
    width: 100%;
    height: 45px;
    border-bottom: solid 0.8px #eee;
    /* border-bottom: 0.5px solid rgba(0, 0, 0, 0.2); */
    position: relative;
    margin-top: 3px;
    box-sizing: border-box;
}

.user .chose_file:after {
    content: "";
    display: block;
    position: absolute;
    left: -50%;
    /* width: 200%; */
    height: 1px;
    background: #eee;
    -webkit-transform:scale(0.8);
}

3. input 输入框先输入数字在输入表情/汉字，input 框会抖动一下。点击 input 框背景色会很明显改变一下。

.user .title_input input {
    width: 100%;
    -webkit-tap-highlight-color:rgba(255,0,0,0); /*解决点击input框背景色改变问题*/
    border: none;
    font-size: 17px;
    line-height: 22px;/*解决input框抖动问题*/
    color: black;
}

4. 一些申请页面都会有我同意 XXX 协议之类的东西，一般都是用position使其脱离正常文本流定位在离下面 xxpx，当你点击输入框会唤起原生键盘，直接把它就给顶上来了。如图所示

在呼出创建放映厅页面时获取下同意 box 这时的位置是刚刚好的
△X=同意距离顶部的距离-提交 box 距离顶部的距离-提交的自身高度
然后先将同意 box 的position设置为static再将 △X 设置为同意 box 的marginTop
即$('.agreement').css('position', 'static').css('marginTop', len);

$(".creat_hall").animate({
            top: '-=0',
        }, 300, function () {
            $('.creat_hall').css('background', 'rgba(0, 0, 0, 0.4)');
            let agrTop = $('.agreement').offset().top;//同意div距离顶部距离
            let subTop = $('.submit').offset().top; //提交按钮距离顶部距离
            let len = agrTop - subTop - 50;//差值=agrTop-subTop-提交按钮本身height
            $('.agreement').css('position', 'static').css('marginTop', len);
        });

移动端轮播以及滑动效果

相较于 PC，移动端的兼容问题确实令人头秃。很多问题其实就是一个配置项的问题。

移动端的轮播用的是swiper.js 4.5.0,会出现间接性失踪（白屏，闪屏）问题。

var mySwiper = new Swiper('.swiper-container', {
       autoplay: true,
       loop: flags,
       lazyLoading: true,
       lazyLoadingInPrevNext: true,
       grabCursor: true,
       roundLengths: true,
       parallax: true,
       observer: true,
       simulateTouch: true,
       observeParents: true,
       init: true,
       autoplay: {
        disableOnInteraction: false//这个比较重要，一个属性问题便解决了
       },
       on: {
        transitionEnd: function (param) {
         $('.wallslength .len').text(this.realIndex + 1)
        },
       },
      })

当你发现问题时，首先去官网瞅瞅版本更新没，换一下版本问题可能大部分问题就解决了。

滑动效果使用BetterScroll 2.X，ios会很卡顿，慢动作等等问题...
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

if (nav == 'IOS') {
      // alert('ios')
      // 竖直方向上的滚动
      outerScroll = new BScroll('.info', {
       scrollY: true,
       momentum: true,
       HWCompositing: true,
       useTransition: false,//解决问题的关键
      //useTransition:是否使用 CSS3 transition 动画。
      //设置为 false，则使用 requestAnimationFrame 做动画。
       pullDownRefresh: {
        threshold: 50,
        stop: 20
       },
       probeType: 3,
       mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
       }
      })
     } else {
      outerScroll = new BScroll('.info', {
       scrollY: true,
       momentum: true,
       HWCompositing: true,
       useTransition: true,
       pullDownRefresh: {
        threshold: 50,
        stop: 20
       },
       probeType: 3,
       mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
       }
      })
     }

关于移动端视频问题

安卓/IOS默认浏览器都对视频播放进行了自己的一套封装，使用过原生video、西瓜视频、flv.js、video.js、aliplayer等最后选择了aliplayer。（务必确保最新版本）要求不是太高完全ok，浏览器一旦呼出他自己的视频组件，就不好控制。

// 初始化阿里云播放器ß
      player = new Aliplayer({
       id: 'J_prismPlayer',
       width: width + 'px',
       // width: '100%',
       height: height + 'px',
       // height: 627 +'px' ,
       useH5Prism: true,
       lang: 'zh-cn',
       //支持播放地址播放,此播放优先级最高
       source: response.data.photos[0],
       playsinline: true,
       showBuffer: true,
       autoplay: false,
       'x5-playsinline': true,
       playsinline: true,
       'webkit-playsinline': true,
       isLive: false,
       // x5_type: "h5",
       x5_orientation: 'portraint',
       x5_video_position: 'center',
       'x5-video-player-type': 'h5',
       // 'x5-video-player-type': 'h5',
       // 'x5-video-orientation':' portraint',
       useFlashPrism: false,
       showBarTime: 2000,
       controlBarVisibility: "always",
       // controlBarVisibility: "click",
       cover: response.data.thumbnailImg,
       rePlay: false,
       preload: true,
      }, function (player) {
       $('.prism-player video').attr('poster', response.data.thumbnailImg);
      })

本文使用 mdnice 排版