iPhone 網頁倒數 出現 NaN 的解法

很多網頁會需要做倒數的功能, 特別是現在流行的團購網這個功能每頁幾乎都會有~

團購的倒數做法如下: (有很多做法, 下述只是其中一種)

1. 於頁面秀出剩餘時間的 Timestamp
2. JavaScript 讀取剩餘時間的 Timestamp, 轉換成 時分秒
3. JavaScript setTimeout() 每秒減1, 到0時 clearTimeout() 即可.

問題

此做法在一般網頁、Android 手機都很正常, 但在 iPhone 卻會發生如下述的狀況:

30 -> NaN -> 29 -> NaN -> 28..

原因

iPhone 把這長串的數字(剩餘時間的Timestamp) 當成 電話號碼, 所以每次變動都會出現 NaN.

解法

於 HTML Meta Tag 加上下述即可:

<meta name="format-detection" content="telephone=no">