h5坑之路
1、input框在ios上背景颜色在真机上有色差
解决：input[type=button], input[type=submit], input[type=file], button{
cursor:pointer;
-webkit-appearance:none;
}
2、网页在手机上强制横屏：
解决：目前只是在uc与qq-x5内核上解决啦
<meta name="screen-orientation" content="portrait"/>//uc
<meta name="x5-orientation" content="portrait"/>//qq-x5
3、在ios系统上animation-play-state/* Safari 4.0 - 8.0 */不好使：
解决 使用动画帧的方法来，把他切割成多个动画帧
目前在ios11上不能用
4、移动端在点击事件上的延迟（在iOS上是300ms）onclick事件：
解决方案：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
5、点击元素产生背景或边框怎么去掉
//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}// 也可以* { -webkit-tap-highlight-color: rgba(0,0,0,0); } winphone<meta name="msapplication-tap-highlight" content="no">
6、美化表单元素
一、使用appearance改变webkit浏览器的默认外观input,select{-webkit-appearance:none;appearance:none; }
二、winphone下，使用伪元素改变表单元素默认外观
1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰select::-ms-expand{display:none; }
2.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none; }
3.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none; }
7、屏幕旋转的事件和样式
//JS处理
function orientInit(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape'){
//这里是横屏下需要执行的事件
}else{
//这里是竖屏下需要执行的事件
}
}
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
setTimeout(orientInit, 100);
},false)
//CSS处理
//竖屏时样式
@media all and (orientation:portrait){ }
//横屏时样式
@media all and (orientation:landscape){ }
8、audio元素和video元素在ios和andriod中无法自动播放
//音频，写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
//音频，写法二<audio controls="controls">
优先播放音乐bg.ogg，不支持在播放bg.mp3
优先播放音乐bg.ogg，不支持在播放bg.mp3
//JS绑定自动播放（操作window时，播放音乐）</audio>
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间
9、JS判断设备
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
10、JS判断微信浏览器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
11、页面缓存设置
<!--清除缓存--!>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
12、弹层后面的内容滚动
deleteSong(key,id,index,e){
letscrollTop_=document.body.scrollTop
document.querySelector('body').style.overflow='hidden';
document.querySelector('body').style.overflow='hidden';
document.querySelector('html').style.overflow='hidden';
document.querySelector('html').style.position='fixed';
document.querySelector('html').style.top=-document.body.scrollTop+'px';
functionforbidScroll(e){
e.preventDefault&&e.preventDefault();
e.returnValue=false;
e.stopPropagation&&e.stopPropagation();
returnfalse;
}
var_this=this;
letaDelete=document.querySelectorAll('.delete');
aDelete[index].style.backgroundImage=`url(${require("./images/delete2.png")})`;
window.addEventListener('touchmove',forbidScroll,false)
confirmAlert({
title:'确定删除歌曲吗？',// Title dialog
message:'',// Message dialog
confirmLabel:'确认',// Text button confirm
cancelLabel:'取消',// Text button cancel
onConfirm:()=>{
document.body.scrollTop=scrollTop_;
document.querySelector('body').style.overflow='initial';
document.querySelector('html').style.overflow='initial';
document.querySelector('html').style.position='static';
window.removeEventListener('touchmove',forbidScroll,false);
aDelete[index].style.backgroundImage=`url(${require("./images/delete1.png")})`;
letsong=_this.state.songlist;
leturl=Config.api.portfolio+'/'+id;
fetch(url,{method:"DELETE",credentials:'include'}).then((res)=>{
song.splice(index,1);
_this.setState({
songlist:song
})
});
},
onCancel:()=>{
document.body.scrollTop=scrollTop_;
document.querySelector('body').style.overflow='initial';
document.querySelector('html').style.overflow='initial';
document.querySelector('html').style.position='static';
aDelete[index].style.backgroundImage=`url(${require("./images/delete1.png")})`;
window.removeEventListener('touchmove',forbidScroll,false)
},
});
}
13、
