1、input框在ios上背景顏色在真機(jī)上有色差
解決：input[type=button], input[type=submit], input[type=file], button{
cursor:pointer;
-webkit-appearance:none;
}
2、網(wǎng)頁(yè)在手機(jī)上強(qiáng)制橫屏：
解決：目前只是在uc與qq-x5內(nèi)核上解決啦
<meta name="screen-orientation" content="portrait"/>//uc
<meta name="x5-orientation" content="portrait"/>//qq-x5
3、在ios系統(tǒng)上animation-play-state/* Safari 4.0 - 8.0 */不好使：
解決 使用動(dòng)畫(huà)幀的方法來(lái)，把他切割成多個(gè)動(dòng)畫(huà)幀
目前在ios11上不能用
4、移動(dòng)端在點(diǎn)擊事件上的延遲（在iOS上是300ms）onclick事件：
解決方案：
fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲
zepto的touch模塊，tap事件也是為了解決在click的延遲問(wèn)題
5、點(diǎn)擊元素產(chǎn)生背景或邊框怎么去掉
//ios用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果；
//winphone系統(tǒng),點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景，能通過(guò)設(shè)置去掉；
//特殊說(shuō)明：有些機(jī)型去除不了，如小米2。對(duì)于按鈕類還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
}// 也可以* { -webkit-tap-highlight-color: rgba(0,0,0,0); } winphone<meta name="msapplication-tap-highlight" content="no">
6、美化表單元素
一、使用appearance改變webkit瀏覽器的默認(rèn)外觀input,select{-webkit-appearance:none;appearance:none; }
二、winphone下，使用偽元素改變表單元素默認(rèn)外觀
? ? ?1.禁用select默認(rèn)箭頭，::-ms-expand修改表單控件下拉箭頭，設(shè)置隱藏并使用背景圖片來(lái)修飾select::-ms-expand{display:none; }
? ? 2.禁用radio和checkbox默認(rèn)樣式，::-ms-check修改表單復(fù)選框或單選框默認(rèn)圖標(biāo)，設(shè)置隱藏并使用背景圖片來(lái)修飾input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none; }
? ? 3.禁用pc端表單輸入框默認(rèn)清除按鈕，::-ms-clear修改清除按鈕，設(shè)置隱藏并使用背景圖片來(lái)修飾input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none; }
7、屏幕旋轉(zhuǎn)的事件和樣式
//JS處理
function orientInit(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape'){
//這里是橫屏下需要執(zhí)行的事件
}else{
//這里是豎屏下需要執(zhí)行的事件
}
}
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
setTimeout(orientInit, 100);
},false)
//CSS處理
//豎屏?xí)r樣式
@media all and (orientation:portrait){? }
//橫屏?xí)r樣式
@media all and (orientation:landscape){? }
8、audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放
//音頻，寫(xiě)法一<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>
//音頻，寫(xiě)法二<audio controls="controls">
優(yōu)先播放音樂(lè)bg.ogg，不支持在播放bg.mp3
優(yōu)先播放音樂(lè)bg.ogg，不支持在播放bg.mp3
//JS綁定自動(dòng)播放（操作window時(shí)，播放音樂(lè)）</audio>
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小結(jié)
//1.audio元素的autoplay屬性在IOS及Android上無(wú)法使用，在PC端正常
//2.audio元素沒(méi)有設(shè)置controls時(shí)，在IOS及Android會(huì)占據(jù)空間大小，而在PC端Chrome是不會(huì)占據(jù)任何空間
9、JS判斷設(shè)備
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、頁(yè)面緩存設(shè)置
<!--清除緩存--!>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
12、彈層后面的內(nèi)容滾動(dòng)
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:'確認(rèn)',// 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、
