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

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

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

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

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

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

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

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

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