移动端css技巧

最新推荐文章于 2023-06-28 18:43:17 发布

原创最新推荐文章于 2023-06-28 18:43:17 发布 · 720 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动 #css

本文介绍了移动端Web开发中的一些关键技巧，包括如何使CSS伪类:active在移动端生效、如何去除点击高亮效果、iOS输入框阴影关闭方法、判断手机横竖屏状态以及iOS文字放大设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、移动端伪类 :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;