1. 1pxborder的問(wèn)題

原因: 設(shè)備像素比不同

從移動(dòng)端的角度說(shuō)個(gè)具體的場(chǎng)景，以iphone6為例。

iphone6的屏幕寬度為375px，設(shè)計(jì)師做的視覺(jué)稿一般是750px，也就是2x，這個(gè)時(shí)候設(shè)計(jì)師在視覺(jué)稿上畫(huà)了1px的邊框，于是你就寫(xiě)了“border-width:1px”，so...1px邊框問(wèn)題產(chǎn)生了。

對(duì)設(shè)計(jì)師來(lái)說(shuō)它的1px是相對(duì)于750px的（物理像素），對(duì)你來(lái)說(shuō)你的1px是相對(duì)于375px的（css像素）“實(shí)際上你應(yīng)該是border-width:0.5px”。

解決方案:

1) 媒體查詢(xún)+小數(shù)點(diǎn)寫(xiě)法

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {.border { border: 0.333333px solid #999 }
}

2) transform+偽類(lèi)

利用偽類(lèi)標(biāo)簽，根據(jù)父級(jí)定位，大小根據(jù)媒體查詢(xún)縮放實(shí)現(xiàn)效果（注意別忘記了“transform-origin: left top;”）

<span class="border-1px">1像素邊框問(wèn)題</span>

// less
.border-1px{position: relative;&::before{content: "";position: absolute;left: 0;top: 0;width: 200%;border:1px solid red;color: red;height: 200%;-webkit-transform-origin: left top;transform-origin: left top;-webkit-transform: scale(0.5);transform: scale(0.5);pointer-events: none; /* 防止點(diǎn)擊觸發(fā) */box-sizing: border-box;@media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){width: 300%;height: 300%;-webkit-transform: scale(0.33);transform: scale(0.33);}}
}

3)?window.devicePixelRatio+全局狀態(tài)管理器修改class類(lèi)名稱(chēng)

寫(xiě)好不同類(lèi)對(duì)應(yīng)的css樣式,使用JavaScript的window.devicePixelRatio+全局狀態(tài)管理器修改class類(lèi)名稱(chēng)

注意:

一鍵換膚的功能也可以參考全局狀態(tài)管理器修改class類(lèi)名稱(chēng)達(dá)到目的

2. 2x,3x圖的適配

原因:設(shè)備像素比

方案一:

媒體查詢(xún),根據(jù)不同的設(shè)備像素比填充相應(yīng)的背景圖片:

移動(dòng)端開(kāi)發(fā)過(guò)程中，因?yàn)槭謾C(jī)的dpr(設(shè)備像素比不同)，我們需要根據(jù)dpr來(lái)修改圖標(biāo)的大小:

1) 通過(guò)mixin,動(dòng)態(tài)修改圖標(biāo)的背景圖片。通過(guò)@media (媒體查詢(xún))，判斷設(shè)備的dpr。

bg-image($url) {background-image: url($url + "@2x.png");@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {background-image: url($url + "@3x.png");}
}

2) css樣式中調(diào)用 bg-image 方法

div{width:30px;height:20px;background-size:30px  20px;background-repeat:no-repeat;bg-image('special_1');     
}

方案二:

寫(xiě)好不同類(lèi)對(duì)應(yīng)的css樣式,使用JavaScript的window.devicePixelRatio+全局狀態(tài)管理器修改class類(lèi)名稱(chēng)

注意:

一鍵換膚的功能也可以參考全局狀態(tài)管理器修改class類(lèi)名稱(chēng)達(dá)到目的

3. 圖片在安卓上,有些設(shè)備模糊的問(wèn)題

原因:

今天遷移代碼的時(shí)候，發(fā)現(xiàn)有些圖片是.9.png格式，但是代碼上又沒(méi)這個(gè)9，我一開(kāi)始以為這個(gè)9是這個(gè)圖片名字里面的，不知道有.9.png格式的圖片，后面百度了下，才發(fā)現(xiàn)有這種類(lèi)型的圖片格式，然后在圖片的名字后面加上9就行了。

png格式圖片和9.png格式圖片區(qū)別:

9.png格式，其實(shí)相當(dāng)于把一張png圖分成了9個(gè)部分（九宮格），分別為4個(gè)角，4條邊，以及一個(gè)中間區(qū)域，4個(gè)角是不做拉升的，所以還能一直保持圓角的清晰狀態(tài)，而2條水平邊和垂直邊分別只做水平和垂直拉伸，所以不會(huì)出現(xiàn)邊會(huì)被拉粗的情況，只有中間用黑線(xiàn)指定的區(qū)域做拉伸。結(jié)果是圖片不會(huì)走樣

4. 固定定位布局,鍵盤(pán)擋住輸入框內(nèi)容

在移動(dòng)端開(kāi)發(fā)的時(shí)候，用到了position:fixed的遮罩蒙層，在蒙層里又放置里輸入框。當(dāng)用戶(hù)sh輸入時(shí)，軟鍵盤(pán)會(huì)彈起來(lái)，會(huì)遮罩住輸入框。

通過(guò)resize() 方法觸發(fā) resize 事件，或規(guī)定當(dāng)發(fā)生 resize 事件時(shí)運(yùn)行的函數(shù)。

var windheight = $(window).height();  /*未喚起鍵盤(pán)時(shí)當(dāng)前窗口高度*/$(window).resize(function(){var docheight = $(window).height();  /*喚起鍵盤(pán)時(shí)當(dāng)前窗口高度*/        if(docheight < windheight){            /*當(dāng)喚起鍵盤(pán)高度小于未喚起鍵盤(pán)高度時(shí)執(zhí)行*/$(".submit").css("position","static");}else{$(".submit").css("position","fixed");}           });

更合理的做法，應(yīng)該是規(guī)避這個(gè)問(wèn)題的發(fā)生。

在有position:fixed的彈層里，不應(yīng)設(shè)置輸入框。

5. click的300ms延遲問(wèn)題和點(diǎn)擊穿透問(wèn)題

原因:

重點(diǎn)：由于移動(dòng)端會(huì)有雙擊縮放的這個(gè)操作，因此瀏覽器在click之后要等待300ms，看用戶(hù)有沒(méi)有下一次點(diǎn)擊，也就是這次操作是不是雙擊。

方案一:禁用縮放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
復(fù)制代碼

缺點(diǎn):

通過(guò)完全禁用縮放來(lái)達(dá)到去掉點(diǎn)擊延遲的目的。但是通常情況下，我們還是希望頁(yè)面能通過(guò)雙指縮放來(lái)進(jìn)行縮放操作，比如放大一張圖片，放大一段很小的文字。

方案二:更改默認(rèn)的視口寬度

<meta name="viewport" content="width=device-width">

• 隨著響應(yīng)式設(shè)計(jì)的普及，很多站點(diǎn)都已經(jīng)對(duì)移動(dòng)端坐過(guò)適配和優(yōu)化了，這個(gè)時(shí)候就不需要雙擊縮放了
• 如果能夠識(shí)別出一個(gè)網(wǎng)站是響應(yīng)式的網(wǎng)站，那么移動(dòng)端瀏覽器就可以自動(dòng)禁掉默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲。
• 如果設(shè)置了上述meta標(biāo)簽，那瀏覽器就可以認(rèn)為該網(wǎng)站已經(jīng)對(duì)移動(dòng)端做過(guò)了適配和優(yōu)化，就無(wú)需雙擊縮放操作了。
• 這個(gè)方案相比方案一的好處在于，它沒(méi)有完全禁用縮放，而只是禁用了瀏覽器默認(rèn)的雙擊縮放行為，但用戶(hù)仍然可以通過(guò)雙指縮放操作來(lái)縮放頁(yè)面。

方案三:?CSS touch-action

touch-action這個(gè)CSS屬性。這個(gè)屬性指定了相應(yīng)元素上能夠觸發(fā)的用戶(hù)代理（也就是瀏覽器）的默認(rèn)行為。如果將該屬性值設(shè)置為touch-action: none，那么表示在該元素上的操作不會(huì)觸發(fā)用戶(hù)代理的任何默認(rèn)行為，就無(wú)需進(jìn)行300ms的延遲判斷。

方案四: FastClick

• FastClick?是?FT Labs?專(zhuān)門(mén)為解決移動(dòng)端瀏覽器 300 毫秒點(diǎn)擊延遲問(wèn)題所開(kāi)發(fā)的一個(gè)輕量級(jí)的庫(kù)。
• FastClick的實(shí)現(xiàn)原理是在檢測(cè)到touchend事件的時(shí)候，會(huì)通過(guò)DOM自定義事件立即出發(fā)模擬一個(gè)click事件，并把瀏覽器在300ms之后的click事件阻止掉。

點(diǎn)擊穿透問(wèn)題:

原因:

使用touchstart去代替click事件,但是在移動(dòng)端瀏覽器，事件執(zhí)行的順序是touchstart > touchend > click.

使用touchstart去代替click事件有兩個(gè)缺點(diǎn):

第一：touchstart是手指觸摸屏幕就觸發(fā)，有時(shí)候用戶(hù)只是想滑動(dòng)屏幕，卻觸發(fā)了touchstart事件，這不是我們想要的結(jié)果；
第二：使用touchstart事件在某些場(chǎng)景下可能會(huì)出現(xiàn)點(diǎn)擊穿透的現(xiàn)象。

解決方案:

1) 只用touch

把頁(yè)面內(nèi)所有click全部換成touch事件（touchstart、’touchend’、’tap’），

2) 只使用click(下下策)

3)?tap后延遲350ms再處理事件

4) pointer-events

• 比較麻煩且有缺陷，
• 不建議使用
• mask隱藏后，給按鈕下面元素添上pointer-events: none;樣式，讓click穿過(guò)去，350ms后去掉這個(gè)樣式，恢復(fù)響應(yīng)
• 缺陷是mask消失后的的350ms內(nèi)，用戶(hù)可以看到按鈕下面的元素點(diǎn)著沒(méi)反應(yīng)，如果用戶(hù)手速很快的話(huà)一定會(huì)發(fā)現(xiàn)

5)?fastclick

好用的解決方案，不介意多加載幾KB的話(huà)，

不建議使用:

，因?yàn)橛腥擞龅搅薭ug，首先引入fastclick庫(kù)，再把頁(yè)面內(nèi)所有touch事件都換成click，其實(shí)稍微有點(diǎn)麻煩，建議引入這幾KB就為了解決點(diǎn)透問(wèn)題不值得

6. iphone和ipad下輸入框默認(rèn)內(nèi)陰影

解決方案

方法一：

<!--如果 ui 樣式里有邊框，可以用外層盒子設(shè)置邊框-->
input{border:none;
}

方法二：

//在IOS下，input 和textarea表單默認(rèn)會(huì)有個(gè)內(nèi)陰影，一定程度上影響視覺(jué)一致，可通過(guò)設(shè)置下面代碼去掉：input{-webkit-appearance: none;
}

?7. 防止升級(jí)中頁(yè)面放大和縮小

<meta name="viewport" content="width = device-width,inital-scale=1.0,maximun = 1.0,user-scalable = no">

8. flex布局

Flex 布局是什么？

Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為 Flex 布局。

.box{display: flex;
}

行內(nèi)元素也可以使用 Flex 布局。

.box{display: inline-flex;
}

Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。

.box{display: -webkit-flex; /* Safari */display: flex;
}

注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

容器的屬性:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction屬性

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。

.box {flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4個(gè)值。

• row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
• row-reverse：主軸為水平方向，起點(diǎn)在右端。
• column：主軸為垂直方向，起點(diǎn)在上沿。
• column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

flex-wrap屬性

默認(rèn)情況下，項(xiàng)目都排在一條線(xiàn)（又稱(chēng)"軸線(xiàn)"）上。flex-wrap屬性定義，如果一條軸線(xiàn)排不下，如何換行。

.box{flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默認(rèn)）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content屬性

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

• flex-start（默認(rèn)值）：左對(duì)齊
• flex-end：右對(duì)齊
• center： 居中
• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
• space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

.box {align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。

• flex-start：交叉軸的起點(diǎn)對(duì)齊。
• flex-end：交叉軸的終點(diǎn)對(duì)齊。
• center：交叉軸的中點(diǎn)對(duì)齊。
• baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。
• stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。

align-content屬性

align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

該屬性可能取6個(gè)值。

• flex-start：與交叉軸的起點(diǎn)對(duì)齊。
• flex-end：與交叉軸的終點(diǎn)對(duì)齊。
• center：與交叉軸的中點(diǎn)對(duì)齊。
• space-between：與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布。
• space-around：每根軸線(xiàn)兩側(cè)的間隔都相等。所以，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍。
• stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸。

項(xiàng)目的屬性:

以下6個(gè)屬性設(shè)置在項(xiàng)目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order屬性

order屬性定義項(xiàng)目的排列順序,數(shù)值越小,排列越靠前,默認(rèn)為0

.item {order: <integer>;
}

flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

.item {flex-grow: <number>; /* default 0 */
}

flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

.item {flex-shrink: <number>; /* default 1 */
}

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

負(fù)值對(duì)該屬性無(wú)效。

flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

.item {flex-basis: <length> | auto; /* default auto */
}

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。

flex屬性

flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個(gè)快捷值：auto(1 1 auto) 和 none (0 0 auto)。

建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致。

9.px,em,rem,%,vw,vh,vw這些單位的區(qū)別?

1) px

px就是pixel的縮寫(xiě)，意為像素。px就是一張圖片最小的一個(gè)點(diǎn)，一張位圖就是千千萬(wàn)萬(wàn)的這樣的點(diǎn)構(gòu)成的，比如常常聽(tīng)到的電腦像素是1024x768的，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)。

2) em

• 參考物是父元素的font-size,具有繼承的特點(diǎn).
• 如果自身定義了font-size按自身來(lái)計(jì)算(瀏覽器默認(rèn)字體是16px),
• 整個(gè)頁(yè)面內(nèi)1em不是一個(gè)固定的值

3) rem

css3新單位,相對(duì)于根元素html(網(wǎng)頁(yè))的font-size,不會(huì)像em那樣,依賴(lài)于父元素的字體大小,而造成混亂

4) %

一般說(shuō)是相對(duì)于父元素,但不是很準(zhǔn)備

• 對(duì)于普通定位來(lái)說(shuō)是就是我們理解的父元素
• 對(duì)于position:absolute的元素是相對(duì)于已經(jīng)定位的父元素
• 對(duì)于position:fixed的元素 是相對(duì)于ViewPort(可視窗口)

5) vw

css3新特性,viewpoint width的縮寫(xiě),視窗寬度,1vw等于視窗寬度的1%

舉個(gè)例子：瀏覽器寬度375px, 1 vw = 375px/100 = 3.75px。

6) vh

css3新單位.viewpoint height的縮寫(xiě),視窗高度,1vh等于視窗高度的1%

7) vm

css3新單位,相對(duì)于視口的寬度或高度中較小的那個(gè),其中最小的那個(gè)被均分為100單位的vm

eg:

瀏覽器高度900px,寬度1200px,取最小的瀏覽器高度,1vm=900px/100=9px

10. 移動(dòng)端適配-dpr

定義:

• 像素,又稱(chēng)為畫(huà)素,是圖像顯示的基本單位,英文pixel
• 像素是網(wǎng)頁(yè)布局的基礎(chǔ).一個(gè)像素就是計(jì)算機(jī)能夠顯示一種特定顏色的最小區(qū)域.
• 當(dāng)設(shè)備尺寸相同但像素變得更密集時(shí),屏幕能夠顯示的畫(huà)面的過(guò)渡更細(xì)致,網(wǎng)站看起來(lái)更明快

ppi: 屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量,即屏幕像素密度

分類(lèi):

像素分為2種: 設(shè)備像素和css像素

設(shè)備像素:

設(shè)備屏幕的物理像素,任何設(shè)備的物理像素都是固定的

css像素:

又稱(chēng)為邏輯像素,是為web開(kāi)發(fā)者創(chuàng)造的,在css和JavaScript中使用的一個(gè)抽象的層

每一個(gè)css聲明和幾乎所有的JavaScript屬性都使用css像素,因此實(shí)際上從來(lái)用不上設(shè)備像素,唯一的例外是screen.width/height

縮放:

• 在桌面端,css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素
• 而在手機(jī)端,由于屏幕尺寸的限制,縮放是經(jīng)常的操作
• 不論我們進(jìn)行縮小或放大操作，元素設(shè)置的CSS像素(如width:300px)是始終不變的，而一個(gè)CSS像素對(duì)應(yīng)多少個(gè)設(shè)備像素是根據(jù)當(dāng)前的縮放比例來(lái)決定的

DPR:

設(shè)備像素比DPR(devicePixelRatio)是默認(rèn)縮放為100%的情況下,設(shè)備像素和css像素的比值

DPR=設(shè)備像素/css像素(某一方向上)

這里的css像素對(duì)應(yīng)著以后要對(duì)應(yīng)以后要提到的理想視口,其對(duì)應(yīng)的JavaScript屬性是screen.width/screen.height

而對(duì)于設(shè)備像素比DPR也有對(duì)應(yīng)的JavaScript屬性: window.devicePixelRatio

以iphone5為例，iphone5的CSS像素為320px*568px，DPR是2，所以其設(shè)備像素為640px*1136px

• 寬度比和高度比：這兩個(gè)比值都是 2，表示每個(gè) CSS 像素在寬度和高度方向上分別對(duì)應(yīng) 2 個(gè)設(shè)備像素。
• 總像素比：這個(gè)值是 4，表示每個(gè) CSS 像素對(duì)應(yīng)的設(shè)備像素總數(shù)。具體來(lái)說(shuō)，每個(gè) CSS 像素對(duì)應(yīng) 2x2 = 4 個(gè)設(shè)備像素。

為什么總像素比是 4？

• 面積比：總像素比實(shí)際上是面積比。每個(gè) CSS 像素對(duì)應(yīng)的設(shè)備像素面積是 2x2 = 4 個(gè)設(shè)備像素。
• 數(shù)學(xué)解釋：
  • 設(shè)備像素的總面積：640px * 1136px = 727,680
  • CSS 像素的總面積：320px * 568px = 181,760
  • 總像素比：727,680 / 181,760 = 4

  640(px) / 320(px)  = 21136(px) / 568(px) = 2640(px)*1136(px) /  320(px)*568(px) = 4

11.移動(dòng)端擴(kuò)展點(diǎn)擊區(qū)域

該元素relative定位, 偽類(lèi)使用absolute定位,上右下左都設(shè)置-10px

extend-click()position: relative&:beforecontent: ''position: absolutetop: -10pxleft: -10pxright: -10pxbottom: -10px

?12.上下拉動(dòng)滾動(dòng)條時(shí)卡頓,慢

body
{-webkit-overflow-scrolling:touch;overflow-scrolling:touch;
}

13.長(zhǎng)時(shí)間按住頁(yè)面出現(xiàn)閃退

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

14.ios和Android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩

element
{-webkit-tap-highlight-color:rgba(255,255,255,0);
}

設(shè)置alpha值為0就可以去除本透明灰色遮罩，備注：transparent的屬性值在android下無(wú)效。

15.active兼容處理即偽類(lèi):active失敗

方法一：body添加ontouchstart

<body ontouchstart=''>

方法二：js給document綁定touchstart或touchend事件

<style>a{color:#000;}a:active{color:#fff;}</style><a href=foo>bar</a><script>document.addEventListentener('touchstart',function(){},false);
</script>

16.webkit mask兼容處理

某些低端手機(jī)不支持css3mask，可以選擇性的進(jìn)降級(jí)處理
比如可以使用js判斷來(lái)引用不同class：

if('WebkitMask' in documnet.documentElement.style)
{alert('支持 mask')
}
else
{alert('不支持 mask')
}

17.pc端與移動(dòng)端字體大小的問(wèn)題

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6
{-webkit-text-size-adjust:100%;
}

pc端字體正常顯示，但ios真機(jī)就出現(xiàn)，h1、span等標(biāo)簽字體比較大。

html
{-webkit-text-size-adjust:100%;/*ios端谷歌瀏覽器測(cè)試有效，Android端未測(cè)試*/
}

18.transition閃屏

// 設(shè)置內(nèi)聯(lián)的元素在3D空間如何實(shí)現(xiàn): 保留3D

-webkit-transform-style: preserve-3D;

// 設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶(hù)時(shí)是否可見(jiàn): 隱藏

-webkit-backface-visibility: hidden;

19.圓角bug

某些安卓手機(jī)圓角失效background-clip: padding-box;

20.如何解決禁用表單后移動(dòng)端樣式不統(tǒng)一的問(wèn)題

input:disabled{color:xxx;opacity:1;//text-fill-color文本填充顏色，只兼容webkit內(nèi)核-webkit-text-fill-color:xxx;-webkit-opacity:1;font-size:16px;
}

21.移動(dòng)端加入cursor: pointer點(diǎn)擊時(shí)會(huì)出現(xiàn)一個(gè)背景

*{ 
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}

22.在安卓手機(jī)上的select有灰色背景

select{appearance:none;-moz-appearance:none;-webkit-appearance:none;border:none;}