很多人可能正邁向手機端網頁開發，但又聽說手機端網頁開發有著這樣或那樣的問題，所以有些忐忑。

這裡，博主用近年來開發手機端頁面的經歷，來告訴大家手機端應該注意哪些問題，同時也會講一講這些問題產生的原因以及解決的方法。

問題清單

• <meta> 標籤處理
• 1px 邊框問題
• 300 毫秒點選延遲問題
• 點透問題
• 圖片解析度問題（@2x與@3x圖）

問題詳解

meta 標籤處理

在 2014 年，W3C 就釋出了 HTML5。現在手機端網頁都是採用 HTML5 標準。當然，在一些 PC 網頁，越來越多的人也採用了新的網頁標準。

在開始寫手機端網頁時，我們會在 HTML 中寫上下面的程式碼：

<meta name="viewport" content="width=device-width, initial-scale=1">

1px 邊框問題

所謂的 1px 邊框問題就是在 dpr 大於 1 的螢幕上，我們在 CSS 宣告的 border 為 1px 所呈現出來的效果不是我們希望的 1px。

我們知道螢幕有許許多多的畫素點組成，每一個畫素點只可以呈現一種顏色，畫素點就是顏色分配的最小單位。

觀察上面這張圖，不難發現，在同一物理尺寸大小下，我們可以劃分出不同的數量的小方格。如果我們把其比為畫素點，我們可以知道，在同一大小的手機螢幕上，由於工藝和材料的不同，我們可以得到不同數量畫素點的屏。

同一尺寸，畫素點密度越大，那麼它所呈現出來的顏色越豐富，看上去也就越清晰。蘋果的 Retina 屏就是一種高清屏，螢幕密度比一般安卓手機要大（不過現在安卓手機螢幕的解析度也變大了）。

因為 CSS 中的 px 是一個相對單位，所以在 dpr 為 1 的螢幕中，它會用 1 個畫素點去渲染；但在 dpr 為 2 的螢幕中，它會用 4 個畫素點去渲染。而我們實際上期望在所有的螢幕中，一邊框都是一個畫素點去渲染的。

那麼如何解決這個問題呢？

博主使用的就是 @media 媒體查詢 + 偽類 + transform: scale 這種方式來實現。

border-1px($color) {
  position: relative
  &:after
 
 {
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5) 
    }
  }
}

300 毫秒點選延遲問題

在 PC 時代，我們用滑鼠點選，即可觸發一些動作。但是在智慧手機時代，一切變得不同了。2007 年，首款 iPhone 釋出前，工程師針對移動端大屏手機的體驗做了一些優化。比如單擊可以觸發一個動作，雙擊可以觸發另一個動作，如放大網頁，這極大方便了使用者。

那麼如果判斷使用者是單機還是雙擊呢？蘋果工程師相處了一個方法，使用者點選時會有一個 300 毫米的延遲，之後才會觸發動作。這個 300 毫秒的間隙，如果使用者又點選了一次，那麼可以判斷使用者本次的操作為雙擊。

可是隨著移動網際網路的發展，許多網頁不需要雙擊操作，因為網頁針對移動端的優化做的越來越好。如此以來，300 毫秒的設計反而在大多數場景成了一個問題。

FastClick

• 簡介
  FastClick，FT Labs 專門為解決移動端瀏覽器 300 毫秒點選延遲問題所開發的一個輕量級的庫。

• 原理
  在檢測到 touchend 事件的時候，FastClick 會通過 DOM 自定義事件立即觸發一個模擬 click 事件的 click 事件（自定義事件），並把瀏覽器在 300 毫秒之後真正觸發的 click 事件阻止掉。

點透問題

這個問題造成的原因是：觸控事件和點選事件的時間不一致。

js 事件執行順序：觸控事件 > 點選事件。

如 A 和 B 兩個元素，且採用絕對定位，相互不包含，但是 A 在 B 的上面。假設 A 和 B 都綁定了觸控事件，那 A 元素事件觸發後 A 元素隱藏，這個時候點選效果造成的觸控事件觸發了，但是點選事件還沒觸發。

本來應該作用到 A 元素上的，但是 A 元素隱藏了，就觸發到 B 元素上了。所以看上去像發生了點透事件。

圖片解析度問題（@2x與@3x圖）

為什麼移動端我們有 @2x 與 @3x 圖之分呢？這個還是因為手機螢幕問題，有的是普通屏，有的是高清屏，這就造成了相同尺寸的螢幕畫素密度不同。

這裡我們需要認識一下尺寸和解析度。

• 尺寸：物理單位，一個絕對單位，如：米
• 解析度：相對單位，如：畫素

先說一下手機，如 iPhone 3GS 和 iPhone 4 都是 3.5 英寸，但是前者解析度為 320 * 480，而後者的解析度為 640 * 960。

同樣，同一尺寸的圖片，其解析度也可能不同。

主要有兩種情況會造成問題：

1. 圖片的解析度大於螢幕解析度
2. 圖片的解析度小於螢幕解析度

第一種情況：由於圖片的畫素數目螢幕物理畫素的數目，這樣一來即使使用全部的物理畫素也無法完整顯示這張圖片，因此瀏覽器也會經過一定的演算法，將圖片進行壓縮，使得壓縮後圖片的點陣圖畫素等於物理畫素。

結果：圖片清晰度不會發生變化，但是會有一些色差及銳利度的減少。

第二種情況：用來顯示圖片的螢幕物理畫素個數大於圖片物理畫素，那麼螢幕多出的物理畫素將採用填充的方法來顯示圖片。

結果：造成圖片模糊。