以下内容收集于网络资源！
- 禁止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();
