移动端前端适配

[SunXinFei]

移动端px和rem

前端面对移动端常见的问题是

• 屏幕分辨率
• DPR
• 1px边框
• 2x图、雪碧图切割 rem用于随屏幕伸缩的尺寸。px用于正文文字大小、细边框等不宜随屏幕伸缩的尺寸。考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。 一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。 但是为了解决px字体在苹果高清屏幕上的问题，可以在css中设置不同的dpr来进行优化

[SunXinFei]

工具篇

查看手持端浏览器的兼容情况

[SunXinFei]

自定义蒙层屏蔽手持端滚动

最终方案

之前写的残缺版关于height和overflow的设置有个痛点，就是会丢失当前的滚动条的位置，即遮罩显示滚动条会归零；

body.modal-open {
    position: fixed;
    width: 100%;
}

如果只是上面的 css，滚动条的位置同样会丢失 所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

export const modalHelper = (function (bodyCls) {
  let scrollTop;
  return {
    /**
    * 禁止蒙层下滚动
    */
    afterOpen: function () {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    /**
     * 恢复蒙层下滚动默认
     */
    beforeClose: function () {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

参考文献

残缺版

//css控制，缺点：由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原
watch: {
    isShowLoading(newVal, oldVal) {
      if (newVal === true) {
        html.style.overflow = "hidden";
        html.style.height = "100%";
        body.style.overflow = "hidden";
        body.style.height = "100%";
      } else {
        html.style.overflow = "auto";
        html.style.height = "auto";
        body.style.overflow = "auto";
        body.style.height = "auto";
      }
    }
  },
//js屏蔽，缺点：弹出层里不能有其它需要滚动的内容（如大段文字需要固定高度，显示滚动条也会被阻止）
forbidScroll(e) {
      e.stopPropagation();
      e.preventDefault();
    }

.base-com-loading {
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 99999;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

第二种方案

/**
 * 禁止蒙层下滚动
 */
export const forbidScroll = () => {
  document.querySelector("html").style.overflow = "hidden";
  document.querySelector("html").style.height = "100%";
  document.body.style.overflow = "hidden";
  document.body.style.height = "100%";
}
/**
 * 恢复蒙层下滚动默认
 */
export const normalScroll = () => {
  document.querySelector("html").style.overflow = "visible";
  document.querySelector("html").style.height = "auto";
  document.body.style.overflow = "visible";
  document.body.style.height = "auto";
}

[SunXinFei]

移动端 BounceIn动画导致边框吃掉问题

• 问题描述：如果动画使用了大小变化的类似于BounceIn之类的动画，如果该元素有边框，可能会出现边框被吃掉的问题。
• 解决方案：主要原因是rem计算的过程中会出现无限小数的问题，所以宽高直接用px写死就不会出现这个问题； 另外一种出现的原因是动画抖动，解决在使用animation动画时，页面出现抖动的问题 给使用动画的元素加上-webkit-backface-visibility: hidden;

[SunXinFei]

disabled的input在ios中颜色的问题

input:disabled,input[disabled] {
      opacity: 1;
     color:#333333 !important;//input的背景颜色
      -webkit-text-fill-color:#333333;//input内字体颜色
}

ios中input圆角问题

 .bBtn {
        -webkit-appearance : none ;/*解决ios上按钮的圆角问题*/
    }
    .bInput {
        border-radius: 0;/*解决ios上输入框圆角问题*/
    }

[SunXinFei]

移动端的ios与安卓的复制粘贴功能

try{
      var element = $('<textarea readonly>' + value + '</textarea>')
      $('body').append(element)
      element[0].select()
      element[0].setSelectionRange(0, value.length);
      document.execCommand('Copy')
      element.remove()
    }catch(e){
      alert("您当前环境不支持复制,请手动复制")
    }