移動(dòng)端的 1px

問(wèn)題描述：1px 的邊框。在高清屏下，移動(dòng)端的 1px 會(huì)很粗。


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


下面介紹最常用的方法：


通過(guò)??CSS :before 選擇器??或??CSS :after 選擇器??設(shè)置??height:1px??，同時(shí)縮放0.5倍實(shí)現(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動(dòng)畫(huà)頁(yè)面閃白,動(dòng)畫(huà)卡頓


問(wèn)題描述：CSS動(dòng)畫(huà)頁(yè)面閃白,動(dòng)畫(huà)卡頓


解決方法: 1.盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫(huà)，不使用position的left和top來(lái)定位 2.開(kāi)啟硬件加速


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


禁止保存或拷貝圖像


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



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


iOS 滑動(dòng)不流暢


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

  • 解決方式1.在滾動(dòng)容器上增加滾動(dòng) touch 方法


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


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

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