移动端css技巧

一、移动端伪类 :active 生效

移动端基本没有

:active

的概念，因为不像鼠标，会有经过状态，但是并不代表移动端的

:active

是没有的要CSS伪类

:active

生效，只需要给

document

绑定

touchstart

或

touchend

事件。具体代码：

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

<a herf=foo >bar</a>

<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;