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.  调用手机回车键进行搜索

<input id="keyword" placeholder="输入关键字搜索"  type="search" />


$("#keyword").on('keypress',function(e) {
                var keycode = e.keyCode;
                var searchName = $(this).val();
                if(keycode=='13') {
                    e.preventDefault();
                    //请求搜索接口

                }
         });