移动端css技巧

一、移动端伪类 :active 生效

移动端基本没有:active的概念，因为不像鼠标，会有经过状态，但是并不代表移动端的:active是没有的要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件。具体代码：

<style>
    a { color: #000; }
    a:active { color: #fff;}
style>

<a herf=foo >bara>

<script>
    document.addEventListener('touchstart',function(){},false);
script>

二、在移动端中浏览器会有自带的一个点击高亮的效果，可以通过给a标签或者body，html设置：

-webkit-tap-highlight-color: transparent;

三、在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

四、用JavaScript判断手机当前是横屏，还是竖屏

//判断手机横竖屏状态： 

function direction(){ 
    if(window.orientation==180 || window.orientation==0){ 
        alert("竖屏状态！")        
    } 

    if(window.orientation==90 || window.orientation==-90){ 
        alert("横屏状态！")         
    } 
}

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", direction, false);  

移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。 从而根据实际需求而执行相应的程序。通过添加监听事件orientationchange，进行执行就可以了。

五、Iphone 中横屏文字放大

-webkit-text-size-adjust: 100%; //推荐这个方法  
-webkit-text-size-adjust: none;