一些移动端开发技巧

发表于 | 分类于
| 字数统计: 358 | 阅读时长 ≈ 2

一、页面缩放

1
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
  • width=device-width：设置为设备宽度
  • width=device-height：设置为设备高度
  • initial-scale=1.0：第一次进入页面的初始比例
  • minimum-scale：设置允许缩放的最小比例
  • maximum-scale：设置允许缩放的最大比例
  • user-scalable=no/0(或者user-scalable=yes/1)：设置用户不可以缩放页面

二、ontouchstart

1
2
3
<body ontouchstart>
    ....
</body>

三、一些常用技巧

  • 清除输入框内阴影及框内的高亮边框(weui源码经常使用)

    1
    2
    3
    4
    5
    6
    selector{
        border: 0;
        outline: 0;
        -webkit-appearance: none;
        appearance: none;
    }

  • 移动端禁止用户选中内容框

    1
    2
    3
    4
    5
    6
    selector{
        -webkit-user-select: none; 
        -moz-user-select: none; //移动端不需要
        -ms-user-select: none; 
        user-select: none; 
    }

  • 去除部分android系统中元素被点击时产生的高亮(weui的按钮样式有用到,面试常考)

    1
    2
    3
    4
    5
    selector{
        //-webkit的私有属性
        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
        tap-highlight-color:rgba(0, 0, 0, 0);
    }

  • 禁止文本缩放
    当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以这样禁止：

    1
    2
    3
    html{
        -webkit-text-size-adjust: 100%;
    }

  • 解决字体在移动端比例缩小后出现锯齿的问题（抗锯齿,weui表单源码也有用到）

    1
    2
    3
    selector{
        -webkit-font-smoothing: antialiased;
    }