移动端项目的注意点

最新推荐文章于 2022-11-14 23:37:24 发布

weixin_33805557

最新推荐文章于 2022-11-14 23:37:24 发布

阅读量94

点赞数

原文链接：https://segmentfault.com/a/1190000014303644

版权

移动端点击按钮时有阴影

添加如下类即可去掉：

-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 细线方式