移動(dòng)端兼容
css篇
移動(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;
}
/* 四條邊 */
.setBorderAll {
? position: relative;
? &:after {
? ? content: ' ';
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? width: 200%;
? ? height: 200%;
? ? transform: scale(0.5);
? ? transform-origin: left top;
? ? box-sizing: border-box;
? ? border: 1px solid #e5e5e5;
? ? border-radius: 4px;
? }
}
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);
屏蔽用戶選擇
禁止用戶選擇頁(yè)面中的文字或者圖片
div {
? -webkit-touch-callout: none;
? -webkit-user-select: none;
? -khtml-user-select: none;
? -moz-user-select: none;
? -ms-user-select: none;
? user-select: none;
}
清除輸入框內(nèi)陰影
問(wèn)題描述：在 iOS 上掌挚，輸入框默認(rèn)有內(nèi)部陰影 解決方式：
input {
? -webkit-appearance: none;
}
禁止保存或拷貝圖像
img {
? -webkit-touch-callout: none;
}
輸入框默認(rèn)字體顏色設(shè)置
設(shè)置 input 里面 placeholder 字體的顏色
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
? color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
? color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
? color: #c7c7c7;
}
用戶設(shè)置字號(hào)放大或者縮小導(dǎo)致頁(yè)面布局錯(cuò)誤
設(shè)置字體禁止縮放
body {
? -webkit-text-size-adjust: 100% !important;
? text-size-adjust: 100% !important;
? -moz-text-size-adjust: 100% !important;
}
android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生邊框
部分android系統(tǒng)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣菩咨。去除代碼如下
a,button,input,textarea{
? -webkit-tap-highlight-color: rgba(0,0,0,0)
? -webkit-user-modify:read-write-plaintext-only;
}
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;
}
2.設(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;
}
