移动端项目的注意点

时间 2019-12-12

标签移动项目注意栏目无线繁體版

原文原文链接

移动端点击按钮时有阴影

添加以下类便可去掉：html

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

移动端 :active 无效

添加 ontouchstart 能够解决：java

<body ontouchstart>

移动端长按选中文本

添加以下代码能够解决：web

* {
  -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-scrollpost

CSS3 作 0.5px 的细线

我的推荐 weui 的实现方式：ui

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

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

auto: 会 | none: 不会scala

text-size-adjust: none;