移动端 常用css重置

• 禁止文本被圈选

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

• 禁止长按弹出 菜单

-webkit-touch-callout:none;

• 去除触摸特殊背景

-webkit-tap-highlight-color: rgba(0,0,0,0);
或
-webkit-tap-highlight-color: transparent;

• 消除焦点

-moz-user-focus: none;

• 去除焦点线

outline:none;

• 恢复默认显示 (原有的样子)

-webkit-appearance: none;
-moz-appearance: none; /* Firefox */
appearance: none; /* Safari 和 Chrome */

• 设置元素overflow:scroll滚动（iPhone滑动更加流畅）

over-flow: auto;     /* winphone8和android4+ */
webkit-overflow-scrolling: touch; /* ios5+ */

• 浏览器只允许进行滚动和持续缩放操作。
  任何其它被auto值支持的行为不被支持。
  启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。
  禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。

  *{ touch-action: manipulation }

• 最常见的用法是禁用元素（及其不可滚动的后代）上的所有手势，以使用自己提供的拖放和缩放

#someDom {
  touch-action: none;
}

• 图片使用样式宽高缩小后，显示一侧方向盛满，另一侧方向被居中裁切

img { object-fit: cover; }

示例：

img { width: 200px; height: 200px; object-fit: cover; }

图片非拉伸裁切

• 启动硬件加速; 可以触发的属性（transform、opacity、filter）

.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
或
.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

注：硬件加速会导致 CPU 性能占用量过大，电池电量消耗加大 ；因此尽量避免泛滥使用硬件加速