Mobile terminal H5 page tread pit memory

Style issues on mobile

1. The android the font – weight: 700; That’s what’s considered bold.

2. Border < 1px should not be underlined by Android.

.user .chose_file {
    width: 100%;
    height: 45px;
    border-bottom: solid 0.8 px. #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); } Copy the code

3. Input input box first input numbers before input expressions/Chinese characters, input box will shake a little. Clicking on the Input box will change the background color significantly.

.user .title_input input {
    width: 100%;
    -webkit-tap-highlight-color:rgba(255.0.0.0); /* Resolve the issue of clicking on the input box background color */
    border: none;
    font-size: 17px;
 line-height: 22px;/* Resolve input box jitter */  color: black; } Copy the code

4. Some application pages will have I agree to XXX agreement and other things, generally usedpositionPosition it XXPX away from the normal text flow, and when you click on the input field it will evoke the native keyboard, bringing it directly to the top. As is shown in

△X= The distance between the consent box and the top – the distance between the submission box and the top – the height of the submission itself. Then set the position of the Consent box to static and △X to the Consent 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;// Agree div distance to top distance
 let subTop = $('.submit').offset().top; // Submit button distance from the top  let len = agrTop - subTop - 50;// Error = agrtop-subtop-Submit button height  $('.agreement').css('position'.'static').css('marginTop', len);  }); Copy the code

Mobile terminal rotation and sliding effect

The compatibility issues on mobile are certainly daunting compared to PCS. Many of the problems are simply configuration items.

Swiper. js 4.5.0 is used for rotation on mobile terminals, which may cause intermittent missing (white screen, flash screen) problems.

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// This is important, a property problem is solved  },  on: {  transitionEnd: function (param) {  $('.wallslength .len').text(this.realIndex + 1)  },  },  }) Copy the code

When you find a problem, check the website first to see if the version has been updated. Changing the version may solve most of the problem.

BetterScroll 2.X, ios will be very slow, slow motion, etc…

if (nav == 'IOS') {
      // alert('ios')
      // Vertical scrolling
      outerScroll = new BScroll('.info', {
       scrollY: true. momentum: true. HWCompositing: true. useTransition: false.// The key to solving the problem  //useTransition: Whether to use CSS3 Transition animation.  // Set to false to use requestAnimationFrame for animation.  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  }  })  } Copy the code

About mobile video

Android /IOS default browsers have their own set of video playback encapsulation, using native video, watermelon video, flv.js, video.js, AliPlayer and so on and finally choose AliPlayer. (Be sure to make sure the latest version is not too demanding) completely ok, the browser once it calls out its own video component, difficult to control.

// Initialize Ali cloud player ß
      player = new Aliplayer({
       id: 'J_prismPlayer'.       width: width + 'px'.       // width: '100%',
 height: height + 'px'. // height: 627 +'px' ,  useH5Prism: true. lang: 'zh-cn'. // Supports address play, which has the highest priority  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);  }) Copy the code

This article is formatted using MDNICE