ASP.NET MVC - Mobile上的Safari自動將數字變成Phone Number

14 September 2013 — Written by Sky Chang
#ASP.NET MVC#Browser#HTML

其實這是個小小的問題,而且也和ASP.NET MVC無關…主要是在Mobile上的Safari他太聰明!?了,將我們網頁上的數字,自動辨識成Phone Number…如下圖…原本是日期的2013 08 07變成了聯絡資訊…

IMG_0281

當然,原本的HTML是沒甚麼問題的。

<div class="mainBar" id="home">
    <div class="container">
        <div class="row">
            <div class="span12">
                <h1>Study4Love</h1>
                <p><time>2013 08 17</time> 新竹</p>
                <p>
                <a href="http://registrano.com/events/eeb127" class="register" target="_new">已結束</a>
                </p>
            </div>
        </div>
    </div>
</div>

主要原因還是因為Mobile上的Safari雞婆了太貼心了,解決的方法很簡單,只要加上一個metadata就可以了,如下。

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>@ViewBag.Title</title>

是的,只要加上<meta name="format-detection" content="telephone=no">就可以了;得到的畫面就和原本的一樣了。

IMG_0282

就這樣。

參考資料

Sky & Study4.TW