移动端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会很卡顿，慢动作等等问题...

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);      })