移动端H5常见问题及解决方案

HTML篇

• video禁止全屏播放

<video x-webkit-airplay="true" webkit-playsinline="true" playsinline="true"></video>

CSS篇

• 去除点击元素产生背景或边框

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

• 禁止长按链接与图片弹出菜单

a,img{-webkit-touch-callout:none;}

• 禁止用户选中图片或文字

body{-webkit-user-select: none}

• 禁用webkit内核浏览器的文字大小调整功能

body{-webkit-text-size-adjust: none}

• 去除表单元素默认样式

input{
  -webkit-appearance:none;
  outline:none;
}}

• 改变输入框placeholder的颜色值

::-webkit-input-placeholder { color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

• line-height==height 在部分安卓手机不垂直居中,显示偏上

p{
  line-height: normal;
  padding: 10px 0;
}

• 屏幕旋转的事件和样式

var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
window.addEventListener(resizeEvt, function(){}, false)

//竖屏时样式
@media all and (orientation:portrait){   }
//横屏时样式
@media all and (orientation:landscape){   }

js篇

• iOS中不支持"2000-01-01 00:00:00"格式,返回NaN

var time = "2000-01-01 00:00:00"
time = time.replace(/\-/g, "/");//将时间格式的'-'转成'/'形式，兼容iOS

• iOS中:active点击态样式不生效

document.body.addEventListener('ontouchstart',function(){})

混合篇

• 滚动穿透,当有fixed的蒙版时,滑动屏幕会引起页面的滚动

body.modal-open {
    position: fixed;
}

如果只设置这个样式,会导致蒙版弹出时滚动位置丢失,还需要用js来保存滚动条的位置

if(showModal){
  let  scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  document.body.classList.add('modal-open')
  document.body.style.top = -scrollTop +'px'
}else{
  document.body.classList.remove('modal-open')
  window.scrollTo(0,this.scrollTop)
}

• 输入框被键盘挡住问题

window.addEventListener('resize', function() {
    if(
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
          } else {
            document.activeElement.scrollIntoViewIfNeeded();
          }
        }, 0);
      }
});

   持续更新中......