以下內(nèi)容收集于網(wǎng)絡(luò)資源！
- 禁止ios 長按時不觸發(fā)系統(tǒng)的菜單料饥，禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}
- 禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
- 移動端字體設(shè)定，默認(rèn)使用系統(tǒng)字體，雅黑只是為了PC上調(diào)試工碾，達(dá)到接近的效果
body {font-family:Helvetica,'sans-serif','Microsoft YaHei';}
- ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉
ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用百姓，可設(shè)置-webkit-tap-highlight-color的alpha值為0渊额，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
- 部分android系統(tǒng)中元素被點擊時產(chǎn)生的邊框怎么去掉
android用戶點擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣垒拢，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果
-webkit-user-modify有個副作用旬迹，就是輸入法不再能夠輸入多個字符
另外，有些機(jī)型去除不了求类，如小米2
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
- webkit表單輸入框placeholder的顏色值能改變
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
- 手機(jī)上使用active無效奔垦，使用以下這段js就能處理這個bug
<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
- touchend 不觸發(fā)的解決辦法
觸屏事件的問題：
如果觸發(fā)了 touchmove， touchend 就不會被觸發(fā)了, 而且 touchmove 沒有持續(xù)觸發(fā)尸疆。
解決方法：
只要在 touchstart 的時候調(diào)用下 event.preventDefault(); 即可讓其他事件都正常被觸發(fā)了!
- 屏幕旋轉(zhuǎn)的事件和樣式
事件
window.orientation椿猎，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式寿弱；
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
css
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 豎放加載
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 橫放加載
//豎屏?xí)r使用的樣式
@media all and (orientation:portrait) {
.css{}
}
//橫屏?xí)r使用的樣式
@media all and (orientation:landscape) {
.css{}
}
- 判斷是IOS設(shè)備or安卓設(shè)備
方法一：
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isAndroid) {
alert('這是Android');
}
if (isiOS) {
alert('這是IOS');
}
*
方法二：
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
alert('這是IOS');
} else if (/(Android)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
alert('這是Android');
} else {
alert('這是PC');
- 判斷微信瀏覽器or非微信瀏覽器
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger') {
alert('在微信里打開');
} else {
alert('不在微信里打開');
}
}
is_weixn();
