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.οnclick=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();
- //请求搜索接口
- }
- });