1

移动端点击按钮时有阴影

添加如下类即可去掉:

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

移动端 :active 无效

添加 ontouchstart 可以解决:

<body ontouchstart>

移动端长按选中文本

添加如下代码可以解决:

* {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

移动端禁止缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  

移动端滚动流畅

-webkit-overflow-scrolling:touch;

但是这一行代码有很多 bug ,使用时要谨慎
个人比较推荐:better-scroll

CSS3 做 0.5px 的细线

个人推荐 weui 的实现方式:

.weui-cell:before{
   content: " ";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 1px;
   border-top: 1px solid #D9D9D9;
   color: #D9D9D9;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
}

其它实现 0.5px 细线方式

文本大小根据设备尺寸进行调整

auto: 会 | none: 不会

text-size-adjust: none;

Arif
146 声望1 粉丝

The devil is in the details