移動端項目的注意點

時間 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