移动端小技巧

最新推荐文章于 2023-01-19 21:49:00 发布

转载最新推荐文章于 2023-01-19 21:49:00 发布 · 567 阅读

javascript 专栏收录该内容

40 篇文章

订阅专栏

@supports 根据浏览器对CSS3特性的支持情况来定义不同样式

/* 当浏览器支持弹性布局，括号内的样式生效 */
@supports (display: flex) {
    .example{
        display: flex;
    }
}

/* 当浏览器不支持弹性布局，括号内的样式生效 */
@supports not (display: flex) {
    .example {
        float: left;
    }
}

/* 与或判断 */
@supports ((display: -webkit-flex) or 
    (display: -moz-flex) or
    (display: flex)) and (-webkit-appearance: caret) {
    /* use styles here */
}

// JavaScript中提供了window.CSS.supports方法
// 第一种方法
var supportsFlex = CSS.supports("display", "flex");
// 第二种方法
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

弹性滚动
  
   /* 目前仅支持iOS */
.example {
    -webkit-overflow-scrolling: touch;
}
  
毛玻璃效果
  
   .example {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
  
文字溢出省略号
  
   .example {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 溢出超过2行省略号 */
    text-overflow: ellipsis;
    overflow: hidden;
}
  
禁止用户选中文字
  
   .example {
    -webkit-user-select: none;
    user-select: none;
}
  
1px边框
  
   .example {
    position: relative;
    width: 100px;
    height: 100px;
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 200%;
        height: 200%;
        box-sizing: border-box;
        border: 1px solid #000;
        transform-origin: 0 0;
        transform: scale(0.5);
    }
}
  
两列 左固定右内容垂直居中
方法一：高度无限制
  
   <div class="box">
    <div class="left">
        <img src="http://fpoimg.com/100x100">
    </div>
    <div class="right">文字</div>
</div>
  
  
   .box {
    display: -webkit-box; /* 2009年的语法 */
    display: box;
    -webkit-box-align: center;  /* 垂直居中 */
    box-align: center;
    display: -webkit-flex; /* 2012年的语法 */
    display: flex;
    -webkit-align-items: center; /* 垂直居中 */
    align-items: center;
}
.left {
    width: 100px;
    height: 100px;
}
.right {
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
  
方法二：高度有限制
  
   <div class="box">
    <div class="left">
        <img src="http://fpoimg.com/100x100">
    </div>
    <div class="right">
        <div class="info">
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
            <p>文字</p>
        </div>
    </div>
</div>
  
  
   .box {
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
}
.right {
    position: relative;
    margin-left: 100px;
    font-size: 0;
    overflow: hidden;
}
.right:before {
    content: '';
    display: inline-block;
    width: 0;
    min-height: 100px;
    vertical-align: middle;
}
.right .info {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;;
}
   Demo1  Demo2
   
   calc()允许简单的加、减、乘、除运算
    
     <ul class="col-3">
    <li></li>
    <li></li>
    <li></li>
</ul>
    
    
     .col-3 {
    width: 200px;
    height: 200px;
}
.clo-3 li {
    float: left;
    width: calc(100% / 3); /* 33.3% */
    height: 200px;
}
    
判断用户手机旋屏
    
     /* 方法一 */
/* 竖屏 */
@media all and (orientation: portrait) { /* 规定显示设备的取向 */
    .example {
        display: block;
    }
}

/* 横屏 */
@media all and (orientation: landscape) { /* 规定显示设备的取向 */
    .example {
        display: none;
    }
}

/* 方法二 */
/* 横屏 */
@media screen and (min-aspect-ratio: 13/9) { /* 规定显示设备区域的宽度/高度比 */
    .example {
        display: block;
    }
}
    
/* 方法三 */
function checkDirect() {
    // 横屏
    if (window.orientation == 180 || window.orientation == 0) {
        document.querySelector(".example").style.display = "block";
    }
    // 竖屏
    if (window.orientation == 90 || window.orientation == -90) {
        document.querySelector(".example").style.display = "none";
    }
}
checkDirect();
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", checkDirect, false);
设置input标签placeholder属性的样式
    
     .example::-webkit-input-placeholder {
    color: red;
}
    
取消点击a、button、input标签后区域半透明遮罩
    
     a, button, input {
    -webkit-tap-highlight-color: rgba(255,0,0,0);
}
    
使用Chrome模拟手机调试时字体太大
Google Chrome默认浏览器字体最小字体为：12px，而我们手机端页面常常字体小于12px。
解决：右上角（自定义及控制） -> 设置 -> 显示高级设置 -> 网络内容（自定义字体） -> 最小字号（最小可以设置为6px）
监听CSS3动画事件
    
     /* 
动画开始事件：webkitAnimationStart
动画结束事件：webkitAnimationEnd
动画循环事件：webkitAnimationIteration
过渡动画结束事件：webkitTransitionEnd
 */
example.addEventListener("webkitAnimationStart", function() {
    console.log("动画开始"); // 动画开始执行一次
}, false);

example.addEventListener("webkitAnimationIteration", function() {
    console.log("动画循环结束"); // 动画每循环完成一次执行一次
}, false);
    
判断用户是否在手机端
    
     if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "http://www.example.com";
}
    
图片水平镜像反转
    
     .example-1 {
    transform: scaleX(-1); /* 方法一 */
}
.example-2 {
    transform: rotateY(180deg); /* 方法二 */
}
    
自旋转动画
    
     <div class="example"></div>
    
    
     .example {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    animation: autogyRation 4s linear infinite;
}

@keyframes autogyRation {
    from {
        transform: rotate(0deg) translate(-60px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate(-60deg) rotate(-360deg);
    }
}
    
Demo
   扫光动画
    
     <div class="example">
    <i></i>
</div>
    
    
     .example {
    position: relative;
    width: 400px;
    height: 200px;
    background: #000;
    overflow: hidden;
}

.example i {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    -webkit-transform: skewx(-25deg);
    transform: skewx(-25deg);
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

.example:hover i {
    left: 100%;
    -webkit-transition: .8s;
    transition: .8s;
}
    
监测手机晃动事件
    
     // 晃动函数
function init() {
    if (window.DeviceMotionEvent) {
        window.addEventListener("devicemotion", deviceMotionHandler, false);
    } else {
        alert("您的手机不支持晃动事件");
    }
};
init();

// 定义一个摇动的阀值
var SHAKE_THRESHOLD = 1000;
// 定义一个变量保存上次更新的时间
var last_update = 0;
// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;

function deviceMotionHandler(eventData) {
    // 获取含重力的加速度
    var acceleration = eventData.accelerationIncludingGravity;

    // 获取当前时间
    var curTime = new Date().getTime();
    var diffTime = curTime - last_update;

    // 固定时间段
    if (diffTime > 100) {
        last_update = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;

        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

        if (speed > SHAKE_THRESHOLD) {
            // TODO: 在此处可以实现晃动之后所要进行的操作
        }

        last_x = x;
        last_y = y;
        last_z = z;
    }
}
    
穿透属性
当元素叠在一起时，需要触发下层的元素时，给上层的元素加该属性。
    
     .example {
    pointer-event: none;
}
    
开启GPU加速
    
     HTML5 Video
transition和animation
transform-style: preserve-3d; transform: translate3d(0, 0, 0);
transform: translateZ(0px);
    
使:active生效
    
     <body ontouchstart="">
    
禁用自动识别页面中的电话号码
    
     <meta name="format-detection" content="telephone=no">
    
UA
   // iOS微信内置浏览器UA
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 MicroMessenger/6.0.1 NetType/WIFI

// Android微信内置浏览器UA
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile Safari/537.36 MicroMessenger/6.0.2.56_r958800.520 NetType/WIFI

// Android内置QQ浏览器UA
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile Safari/537.36 V1_AND_SQ_5.3.1_196_YYB_D QQ/5.3.1.2335 NetType/WIFI

// iOS内置QQ浏览器UA
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 QQ/5.2.1.302 NetType/WIFI Mem/28


   PS:原文链接-https://github.com/ONE-SUNDAY/Blog/issues/1