移动端常用功能总结【原创】
1.rem常用框架(js计算--来自淘宝)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</head>
<body>
</body>
</html>
2.模拟按钮hover效果
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。
直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btn-blue{
display:block;
height:42px;
line-height:42px;
text-align:center;
border-radius:4px;
font-size:18px;
color:#FFFFFF;
background-color: #4185F3;
}
.btn-blue:active{
background-color: #357AE8;
}
</style>
</head>
<body ontouchstart>
<div class="btn-blue">按钮</div>
</body>
</html>
3.屏幕旋转的事件和样式
-
事件
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;
}
}
- 样式
/*竖屏时使用的样式*/
@media all and (orientation:portrait) {
.css{}
}
/*横屏时使用的样式*/
@media all and (orientation:landscape) {
.css{}
}
4.ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) }
5.部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签
参考：[webkit移动开发笔记]之如何去除android上a标签产生的边框
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
webkit表单元素的默认外观怎么重置
6.通用
伪元素改变number类型input框的默认样式
.css{-webkit-appearance:none;}
伪元素改变number类型input框的默认样式
input[type=number]::-webkit-textfield-decoration-container {
background-color: transparent;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
webkit表单输入框placeholder的颜色值改变
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
