是否可以添加<a>低於768px分辨率的元素？</a>

Question

基本問題：

有沒有一種方法可以向用戶（768px以下，iPad，iPhone以下）的表內文本添加超鏈接？

喜歡：

<td>Lorem Ipsum</td>

但是，在768px以下，我要添加以下內容：

<td>"<a href="#">"Lorem Ipsum"</a>"</td>

那可能嗎？

Answer 1

一種簡單的方法是：

 <td><span class="visible-pc">Lorem Ipsum</span>
     <span class="visible-sm">"<a href="#">"Lorem Ipsum"</a>"</span>
 </td>

display:none .visible-pc位置display:none如果分辨率<768px， .visible-sm ；與.visible-sm相同，但如果> 768px：

.visible-pc { display: block; }
.visible-sm { display: none;  }

@media screen and (max-width: 768px) {
    .visible-pc { display: none;  }
    .visible-sm { display: block; }
}

---

另一種方法是，如果檢測到clientWidth <768px，則在Javascript中添加鏈接，但這有點復雜（您必須使用DOM，beh。）

Answer 2

如果我了解您的要求正確，那么您只想讓平板電腦用戶看到一個鏈接嗎？ 有很多方法可以解決此問題。 您可以使用javascript來確定屏幕分辨率，也可以使用CSS媒體查詢。

我建議看一下響應式布局框架。 Twitter的“ Bootstrap”就是一個例子，但是還有更多選擇！ Bootstrap具有CSS類，僅在平板電腦上顯示內容。

Answer 3

這是你想要的？

<td><span class="d-text">Lorem Ipsum</span></td>
<td><span class="t-text">"<a href="#">"Lorem Ipsum"</a>"</span></td>

CSS

.d-text {
    display: block;
}

.t-text {
    display: none;
 }


@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

    .t-text {
        display: block;
     }

    .d-text {
        display: none;
    }


}