幾年前我們開始為普通電腦版網站添加手機版本，當時查了一些資料，其中說到很多情況下，手機浏覽器可以識别網頁中的電話号碼并自動添加鍊接，但也可以關閉這個功能并控制号碼是否添加鍊接。這兩年我們在添加手機版網站的時候，一般都沒有去特别處理電話、手機号碼的字段，就讓手機浏覽器自動來處理的。
但考慮到自動添加鍊接這個功能誤識别的問題（例如：漏掉識别合适的電話号碼或者把傳真号碼也添加上鍊接等），人工來控制添加鍊接也許是個更好的辦法。
最近同事在全面排查網站問題的時候，又提出這個問題，我在網上搜索了一下，《Mobile Web Quick Tip: Phone Number Links》、《How to create click-to-call links for mobile browsers》等文章還比較有用，我整理幾點：
自動識别：
iOS和Android上的浏覽器自動可以識别号碼并添加鍊接方便用戶直接點擊撥打，但手機号碼有各種寫法，例如是否有國内區号、是否有國際區号，是否用分隔符、是否用括号、是否用空格等，各種平台的各種浏覽器在識别上不太統一；
手工添加鍊接：
下面這種加tel:或者tel://的方式與http://鍊接方式很接近，用得比較方便：
<!-- 在普通頁面中嵌入 --> <p>如果您想聯系我們, 請<a href="tel:5555555">打電話給我們！</a></p> <!-- 從一個圖片鍊接 --> <a href="tel://555-5555"><img src="phone.png" alt="現在就打電話！" /></a> <!-- 兼容多種平台 (Android + iPhone) --> <a href="tel://1-555-555-5555">+1 (555) 555-5555</a>
這個可以隻用在手機版中，而電腦版中不用改變。
另外，還有添加其它标準的方式，例如：
<a href="wtai://wp/mc;+1800229933">Call us free!</a>
那就需要另外查更詳細的資料。
關閉自動識别：
可以在頁面head中添加标簽來關閉自動識别功能：
<meta name="format-detection" content="telephone=no" />
這個對iOS和Android平台都有效，關閉自動識别不影響人工添加的号碼鍊接标記的使用。
總之，雖說這隻是一個小小的改變，還是情況比較複雜的，各種網站網頁内容、各種手機平台、各種浏覽器都是需要多測試的。
评论