一. 隐藏滚动条
.scroll-box {
overflow: auto;
/*隐藏滚动条 - 兼容ie*/
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
}
/*-webkit-*/
.scroll-box::-webkit-scrollbar {
display: none;
width: 0;
}
/*-o-*/
.scroll-box::-o-scrollbar {
-moz-appearance: none !important;
background: rgba(0,255,0,0) !important;
}
.scroll-box::-o-scrollbar-button {
background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
二. 图片下载
//判断浏览器类型
function checkBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
}; //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
if (userAgent.indexOf("Trident") > -1) {
return "Edge";
} //判断是否Edge浏览器
}
//IE
function ieSavePic(data, filename) {
var bstr = atob(data.split(',')[1]);
var n = bstr.length;;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr]);
window.navigator.msSaveOrOpenBlob(blob, filename);
}
// chrome, 360
function savePic(data, filename) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
$('#saveImg').on('click', function () {
var imgData = $('#img').attr('src');
var filename = '测试.png';
if (checkBrowser()==="IE" || checkBrowser()==="Edge"){
ieSavePic(imgData, filename);
}else{
savePic(imgData, filename);
}
三. 移动端android和ios日期处理差异
在ios系统中使用new Date():
var d = new Date('2018-10-15 08:00:00'); // 返回valid Date
// ios识别不了'-'
// 处理
var str = '2018-10-15 08:00:00';
var d = new Date(str.replace(/-/g,"/"));
// 或者
str = str.split(/[- : \/]/);
var d = new Date(str[0], str[1]-1, str[2], str[3], str[4], str[5]);
四. 移动端常见问题及解决方案
1. h5页面窗口自动调整到设备宽度, 并禁止用户缩放移动端字体:
<meta name=“viewpoint” content=“width: device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2. 如果只需要适配手机设备, 使用px即可, 如果需要适配各种移动设备, 使用rem
3. 当用户手指放在移动设备的屏幕上滑动时会触发touch事件
触发顺序: touchstart->touchmove->touchend->touchcancel
4. 移动端click点击事件会产生200-300ms的延迟响应
移动设备上的浏览器默认会在用户点击屏幕大约延迟300ms后才会触发点击事件, 这是为了检查用户是否在做双击,
可使用fastclick解决
5. 事件
// window.orientation, 取值: 正负90表示横屏模式, 0和180表现为竖屏模式
window.onorientationchange = function() {
switch(window.orientation) {
case -90:
case 90:
console.log(‘横屏’ + window.orientation);
case 0:
case 180:
console.log(‘竖屏’ + window.orientation);
break;
}
}
6. 样式
竖屏时使用的样式: @media all and (orientation: portrait) {}
横屏时使用的样式: @media all and (orientation: landscape) {}
7. audio元素和video元素在ios和andriod中无法自动播放
应对方案: 触屏即播
$(‘html’).one(‘touchstart’, function() {
audio.play();
})