'切換'電話：鏈接打開和關閉...最好只有CSS

Question

我在其他一些帖子中讀過，可以使用tel:在錨標簽中創建電話號碼的可點擊鏈接

我想在響應式網站中實現這一點..這樣的事情：

<a href="tel://1-555-555-5555">Call Us! <span>(555) 555-5555</span></a>

（我計划使用span標記隱藏手機#with CSS）

這個想法是在桌面上你只會看到“給我們打電話！（555）555-5555”，但不是一個實際的鏈接

但是，當我們縮小到移動設備時，您會看到一個風格化的鏈接，只是說“打電話給我們！” 你可以點擊。

我確信有一種方法可以通過JavaScript或JQuery實現這一目標......但是無論如何使用CSS Media Queries實現這一目標？

注意：視覺樣式沒有問題。只是為“切換”概念尋找合理的解決方案。

提前致謝！

Answer 1

將鏈接留在台式計算機上確實沒有任何問題。 例如，這將允許您單擊通過Skype或您可能已安裝的其他VOIP程序呼叫的鏈接。

如果您仍想更改鏈接，只需創建其中兩個。 一個用於桌面，另一個用於移動設備。

Answer 2

您可以創建2個鏈接，一個用於在桌面上顯示，另一個用於移動

要么

使用css將錨點中的電話號碼設置為默認光標，這樣即使您懸停也不會看起來像鏈接。 為了補充這一點，您需要使用js來禁用單擊操作。

這是假設您可以可靠地檢測到您所使用的設備。

Answer 3

我認為您最好的選擇是為您的錨標簽添加ID，通過媒體查詢，您可以將其隱藏在桌面版本上，而不需要跨度。

然后，當您通過媒體查詢中的另一個ID縮小時，您的非錨文本會隱藏。

Answer 4

<a href="tel:123456789" class="tel-link">TEL: 123-456-789</a>

@media screen and (min-width: 600px) {
    .tel-link {
        color: #000 !important;
        text-decoration: none !important;
    }
}

對於寬度超過600px的瀏覽器，這將顯示純黑色的電話號碼（因此它看起來不像鏈接），即使它仍然有鏈接。 我認為沒關系，因為你現在可以通過PC打電話了。