HTML5學堂：本文，我們將繼續為大家總結介紹移動端的常見相容問題，今天要提的是關於移動端HTML與CSS當中，遇到的一些常見相容問題，主要包括取消電話號碼的識別、取消郵箱識別以及橫向rem的問題。

對於移動端的相容問題，由於內容較多，決定書寫成一個系列。在這些雜亂知識的發現與整理，主要來源於幾個講師平時的積累，而自己的學生們也為內容的充實做出了很大的貢獻，在此非常感謝~！不再多說，一起進入今天的主要內容。

移動端相容 - 取消電話號碼識別

具體情形：在iPhone上頁面中的數字識別為電話號碼。

我們書寫的初始結構如下：

<li>
    <h2>HTML5學堂</h2>
    <p>18100010001</p>
    <div>HTML5學堂是一個熱愛H5的講師們組成的組織。致力於構建一個前端、HTML5的分享平臺。能夠給學生提供一些資料，也為廣大前端愛好者提供一個分享平臺。其中涉及到基本的知識、例項開發、JS底層知識、面試真題、相關技術、未來發展等。</div>
</li>
在iPhone中程式碼會自動處理成如下：
<li>
    <h2>HTML5學堂</h2>
    <p>
        <a href="tel:18100010001" title="">18100010001</a>
    </p>
    <div>HTML5學堂是一個熱愛H5的講師們組成的組織。致力於構建一個前端、HTML5的分享平臺。能夠給學生提供一些資料，也為廣大前端愛好者提供一個分享平臺。其中涉及到基本的知識、例項開發、JS底層知識、面試真題、相關技術、未來發展等。</div>
</li>
 

從程式碼中不難看出，在p標籤內部增加了一個a標籤用於包含電話號碼。

解決方法：在網頁檔案的檔案頭部設定如下程式碼即可：

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

移動端相容 - 取消電子郵箱識別

具體情形：在安卓平臺手機中，頁面中的郵箱資訊會被識別為郵箱地址，成為可點選的連結。基本原理和我們上面剛說的iPhone中電話號碼是一樣的，因此我們就直接來說解決辦法。

解決方法：在檔案頭部加入如下程式碼即可。

<meta content="email=no" name="format-detection" />
 

rem水平方向上的相容問題

具體情形：移動端佈局時，橫向使用rem（相對度量單位）時，會在部分手機瀏覽器當中出現問題。

橫向佈局使用rem時的正常頁面效果

華為mete7內建瀏覽器上頁面效果

PS：目前只是測出華為有問題，其他手機貌似沒有問題。

解決方法：水平方向用百分比來實現。具體百分比以及rem的選擇，之前寫過比較詳細的文章，可以檢視——>移動端頁面的開發方法 - 系列