移動端的 1px

問題描述：1px 的邊框。在高清屏下，移動端的 1px 會很粗。


產(chǎn)生原因：首先先要了解一個概念：DPR(devicePixelRatio) 設(shè)備像素比，它是默認(rèn)縮放為 100%的情況下，設(shè)備像素和 CSS 邏輯像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS中設(shè)置的px是邏輯像素,這就造成1px變成物理像素的2px或者3px，比如2 倍屏，設(shè)備的物理像素要實現(xiàn) 1 像素，所以 CSS 邏輯像素只能是 0.5px。


下面介紹最常用的方法：


通過??CSS :before 選擇器??或??CSS :after 選擇器??設(shè)置??height:1px??，同時縮放0.5倍實現(xiàn)。


/* 底邊框 */
.b-border {
  position: relative;
}
.b-border:before {
  content: ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}


CSS動畫頁面閃白,動畫卡頓


問題描述：CSS動畫頁面閃白,動畫卡頓


解決方法: 1.盡可能地使用合成屬性transform和opacity來設(shè)計CSS3動畫，不使用position的left和top來定位 2.開啟硬件加速


-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);


禁止保存或拷貝圖像


不想讓其他人盜用圖片，可以有如下寫法：



img {
  -webkit-touch-callout: none;
}


iOS 滑動不流暢


ios 手機上下滑動頁面會產(chǎn)生卡頓，手指離開頁面，頁面立即停止運動。整體表現(xiàn)就是滑動不流暢，沒有滑動慣性。 iOS 5.0 以及之后的版本，滑動有定義有兩個值 auto 和 touch，默認(rèn)值為 auto。

  • 解決方式1.在滾動容器上增加滾動 touch 方法


.wrapper {
  -webkit-overflow-scrolling: touch;
}


  • 設(shè)置 overflow 設(shè)置外部 overflow 為 hidden,設(shè)置內(nèi)容元素 overflow 為 auto。內(nèi)部元素超出 body 即產(chǎn)生滾動，超出的部分 body 隱藏。

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}