h5开发中所遇到的兼容性及所遇到的常见问题

1. 移动端border1px问题

<script>

var viewport = document.querySelector("meta[name=viewport]");
//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

</script>

2. 移动端滑动无效问题

<script>
  function GetSlideDirection(startX, startY, endX, endY) {
  var dy = startY - endY;
  //var dx = endX - startX;
  var result = 0;
  if(dy>0) {//向上滑动
  result=1;
  }else{//向下滑动
  result=2;
  }
   
  return result;
  }
   
  //滑动处理
  var startX, startY;
  document.addEventListener('touchstart',function (ev) {
  startX = ev.touches[0].pageX;
  startY = ev.touches[0].pageY;
  }, false);
   
  document.addEventListener('touchend',function (ev) {
  var endX, endY;
  endX = ev.changedTouches[0].pageX;
  endY = ev.changedTouches[0].pageY;
  var direction = GetSlideDirection(startX, startY, endX, endY);
  switch(direction) {
  case 0:
  break;
  case 1:
  // 向上
  window.location = "3-1.html";
  break;
  case 2:
  // 向下
  alert("down");
  break;
   
  default:
  }
 

}, false);

  </script>

3. 移动端视屏video

    <video id="pc_video" style="object-fit: fill" src="../../video/pc.mp4" controls="controls" preload poster="../../img/pc/m.jpg" webkit-playsinline="true" playsinline="true"  x5-video-player-fullscreen="true" x5-video-orientation="portraint">
            </video>

var pcVideo = document.getElementById('pc_video')
            pcVideo.onclick=function(){
                pcVideo.play()
                document.addEventListenerR("WeixinJSBridgeeady", function() {
                    pcVideo.play()
                }, false)
             }

4. 移动端input唤起键盘会吧body内容顶上去

5. 去掉a的默认点击效果

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

input{      outline: none;   }

6.  调用手机回车键进行搜索

  1. <input id="keyword" placeholder="输入关键字搜索"  type="search" />
  2. $("#keyword").on('keypress',function(e) {
  3. var keycode = e.keyCode;
  4. var searchName = $(this).val();
  5. if(keycode=='13') {
  6. e.preventDefault();
  7. //请求搜索接口
  8. }
  9. });
上一篇:springboot深入学习(三)-----docker


下一篇:H5开发中遇到的问题及解决办法