移动端资源小结

以下内容收集于网络资源！

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

移动端字体设定，默认使用系统字体，雅黑只是为了PC上调试，达到接近的效果

body {font-family:Helvetica,'sans-serif','Microsoft YaHei';}

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米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;}

手机上使用active无效，使用以下这段js就能处理这个bug

<script type="text/javascript">
    document.addEventListener("touchstart", function(){}, true)
</script>

touchend 不触发的解决办法

触屏事件的问题：
 如果触发了 touchmove， touchend 就不会被触发了, 而且 touchmove 没有持续触发。
 解决方法：
 只要在 touchstart 的时候调用下 event.preventDefault(); 即可让其他事件都正常被触发了!

屏幕旋转的事件和样式
事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

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">   // 横放加载
//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

判断是IOS设备or安卓设备

方法一：
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();

移动端资源小结

推荐阅读更多精彩内容