Tag: meta

How to disable phone number linking in Mobile Safari?

Posted by – November 4, 2015

同事問了這個問題,如何將 iOS webview 裡出現的電話連結移除,因為畫面中出現了不是電話的數字,卻被系統自動加上了電話連結。

有一個非常簡單的方法,在 HTML 檔案的 <head> 區段加一行宣告即可。

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

這行宣告會停用所有的電話連結。若是反過想要在停用的情況下,加上例外,則可以自行宣告電話連結,語法如下:

<a href="tel:0932123456">0932123456</a>

主要就是用 tel: 關鍵字來達成。

The correct meta viewport syntax

Posted by – October 19, 2012

根據 Apple Web Content Guide 的說明,在撰寫手機版或給特定裝置的網站時,可以在 <head> 中用 <meta> 標籤來設定 viewport 相關的設定。

不過通常這段設定都是 copy / paste,然後再根據需求調整參數。在開新專案的時候也貼了前人的 code,但是卻注意到 Chrome 裡會有錯誤訊息,無法識別這段設定。

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix.
Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.
Viewport argument value "0;" for key "user-scalable" was truncated to its numeric prefix.

找了幾段網路上的設定檔,一比對才發現原來很多人把分隔的逗號打成分號,造成錯誤。

錯誤的寫法

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

正確的寫法

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />