基於用戶設備的顯示文本

Question

我剛剛進入響應式設計，並有關於顯示內容的問題。

顯然我想在用戶使用更大的屏幕時顯示更多的內容，但我也想顯示基於用戶設備的某些文本。

例如，我想在桌面上說「拖放文件」，但在手機上我想說「touch to choose files」。我意識到我可以使用@media查詢並隱藏不適用的文本來做到這一點，但我想知道是否有更好的方法來做到這一點（所以用戶不必每次都加載兩組文本） 。

Answer 1

這個片段是引導CSS框架，你可以基於用戶設備，以獲取更多信息以及如何使用上顯示/隱藏DOM的任何部分的一部分得到here：

.hidden { 
    display: none; 
    visibility: hidden; 
} 
.visible-phone { 
    display: none !important; 
} 
.visible-tablet { 
    display: none !important; 
} 
.hidden-desktop { 
    display: none !important; 
} 
.visible-desktop { 
    display: inherit !important; 
} 
@media (min-width: 768px) and (max-width: 979px) { 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important ; 
    } 
    .visible-tablet { 
    display: inherit !important; 
    } 
    .hidden-tablet { 
    display: none !important; 
    } 
} 
@media (max-width: 767px) { 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
} 

或者你可以使用jQuery插件（例如responsejs，....），但我建議你使用從CSS @media查詢（bootstrap是最適合你的意圖）。