常⽤的H5代码1、返回上⼀页
第⼀次在⼿机端⽤到返回上⼀页的时候，只写了(-1)；这⼀句。
但是只在安卓⼿机有效果，兼容苹果⼿机需要在跳转代码后加上return false；这句。跳转后刷新页⾯加上load()；这句。
(-1); //返回上⼀页
return false; //兼容ios系统
load(); //ios刷新页⾯
2、浏览器禁⽌页⾯下拉
addEventListener()⽅法向指定元素添加事件句柄。
preventDefault()⽅法阻⽌元素发⽣默认的⾏为。
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, {
passive: false
});
e.preventDefault();
};
document有安卓版吗
3、媒体查询
⽅向：横屏/竖屏
orientation：portrait | landscape
portrait：指定输出设备中的页⾯可见区域⾼度⼤于或等于宽度
landscape：除portrait值情况外，都是landscape
@media screen and (max-width: 320px){ } //宽度
@media only screen and (orientation: landscape) { } //判断横竖屏
4、上传图⽚显⽰
将上传的图⽚显⽰出来，做后台管理系统的时候有可能会⽤到。
<input type="file" name="image" onchange="show(this)">
<img id="img" src="" />
// JS代码
function show(file){
var reader = new FileReader();  // 实例化⼀个FileReader对象，⽤于读取⽂件
var img = ElementById('img');  // 获取要显⽰图⽚的标签
//读取File对象的数据
img.style.display = 'block';
img.src = sult;
}
}
5、长按事件
$(".btn").on({
touchstart: function(e) {
// 长按事件触发
timeOutEvent = setTimeout(function() {
timeOutEvent = 0;
location.href='www.baidu'; //跳转链接
}, 400);
},
touchmove: function() {
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function() {
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) {
alert('长按开启');
}
return false;
}
})
6、根据页⾯⾼度调整样式
var height = $(window).height();
if(height>625){
$('.box').css("margin-top", "10px");
}
7、清除在浏览器上搜索框中的叉号
.
search::-webkit-search-cancel-button{display: none;}
.search[type=search]::-ms-clear{display: none;}
8、判断安卓和ios
做H5页⾯时，安卓和ios在显⽰上还是有些区别，所以有的时候我会根据不同的⼿机系统去做适配，写不同的样式。var u = navigator.userAgent, app = navigator.appVersion;
//android
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
//ios
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isAndroid){ }
else{ }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。