在設(shè)計網(wǎng)站或APP時，考慮不同設(shè)備上的兼容性是非常重要的。畢竟用戶使用的不僅僅是各種品牌和型號的手機(jī)，還涉及到了不同的操作系統(tǒng)和瀏覽器。而對于在iPhone上兼容性問題，主要體現(xiàn)在CSS樣式的編寫上。

在編寫CSS時，尤其需要注意iPhone上的布局問題。由于iPhone中的Safari瀏覽器正確解讀了Webkit規(guī)范的一大部分，所以使用WebKit CSS屬性是十分重要的。同時，需要將媒體查詢中的最大寬度（max-width）設(shè)為device-width，在實(shí)現(xiàn)響應(yīng)式設(shè)計時，才能讓頁面在iPhone上的效果更佳。

此外，iPhone還需要在以下三個方面進(jìn)行兼容性處理。

/* 1. Retina屏幕顯示 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {
background-image: url(background@2x.png);
}
}

由于iPhone的高清屏幕會尺寸“縮小”，所以需要針對Retina屏幕進(jìn)行對應(yīng)處理，以適應(yīng)iPhone的高清屏幕顯示。

/* 2. 點(diǎn)擊延遲 */
a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout:none;
}

由于iPhone瀏覽器默認(rèn)會有200-300ms的點(diǎn)擊延遲，需要將連續(xù)點(diǎn)擊時觸發(fā)的顏色設(shè)置為透明，去除這個延遲。

/* 3. 橫屏布局 */
@media only screen and (min-width: 480px) {
body {
-webkit-text-size-adjust: none;
}
}

在iPhone中，當(dāng)用戶將其橫置時，界面布局會發(fā)生改變。為了解決這個問題，需要設(shè)置針對橫屏布局的CSS樣式，讓頁面能夠正確適應(yīng)橫屏狀態(tài)。