如何防止鏈接的電話號碼在iOS上斷線？

Question

我正在一個被設置為響應式設計的網站上， 該網站根據在其上查看的屏幕的大小進行適當地轉換。

對於iOS，我注意到，每當我在幻燈片元素下方顯示的摘錄中顯示公司電話號碼時，iOS自動插入的定位標記都會在顯示電話號碼之前引起換行。 有關詳細信息，請參見此屏幕截圖 。

抱歉，但是我沒有渲染的源代碼來顯示這一點，因為iOS不會通過任何類型的“查看源代碼”功能來公開該代碼。 如果有辦法將我的來源顯示為iOS上的渲染方式，請告訴我。

我確實有預渲染的 CSS，該CSS根據屏幕大小觸發中斷和上方文本之間的正確行距，但是很難在行距和位置之間找到平衡。 這是該代碼：

首先，對於“正常”屏幕：

.content .genesis_responsive_slider .slide-excerpt {
    background-color: #222;
    filter: alpha(opacity=0);
    height: 8%;
    width: 100%;
    margin: 0;
    padding: 0px 0px 0px 4%;
}

接下來是480像素寬的“移動”屏幕：

@media only screen and (max-width: 480px) {

     .content #genesis-responsive-slider .slide-excerpt {
         font-size:inherit;
         height: 24%;
         padding:4% 0 0 0;
         line-height: .5rem;
     }

}

有沒有辦法防止錨文本行在較小的iOS屏幕上中斷？

Answer 1

對於我正在處理的項目，我剛剛遇到了同樣的問題。 我找到了為我解決的答案： https : //stackoverflow.com/a/4056764/1778696

您要做的就是將此添加到頭部

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

然后將其添加到您的電話號碼中，以使其可點擊作為電話號碼

<a href="tel:123-456-7890">123-456-7890</a>