如何爲HTML鏈接標記的手持設備使用媒體屬性？

我目前在我的HTML文檔中有以下內容。如何爲HTML鏈接標記的手持設備使用媒體屬性？

<link REL=StyleSheet HREF="/stylesheets/home.css" TYPE="text/css" MEDIA=screen> 
<link REL=StyleSheet HREF="/stylesheets/homedark.css" TYPE="text/css" MEDIA=handheld>

但是，手持設備（我的Android手機）沒有任何變化。有什麼我做錯了，還是它不是這麼簡單？

來源

2011-08-23 muttley91

您將需要使用更先進的媒體查詢，比如那些針對screen size

所以更多的東西一樣

<link rel="stylesheet" href="/stylesheets/homedark.css" type="text/css" 
    media="screen and (max-device-width: 480px)">

內，您的樣式表，它會是這樣的

@media only screen and (max-device-width: 480px) { 
    //Your styles here 
}

http://www.w3.org/TR/css3-mediaqueries/

簡單的JS設備的檢測可能會有所幫助：

if(navigator.userAgent.match(/Android/i) || 
    navigator.userAgent.match(/webOS/i) || 
    navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPod/i)){ 
    // link to stylesheet 
}

一個更好的事情做的是使用某種組合的......媒體查詢&設備/特徵檢測。

這是一個很好的概述：http://www.csskarma.com/presentations/cssla/slides/mobile_media_touch.pdf（警告：PDF文件）

來源

2011-08-23 19:25:33

-2

也許你的手機根據W3C用於該術語的任何標準認爲自己不是手持設備。現代的移動瀏覽器與全面的桌面瀏覽器沒有什麼不同，並且遠遠不如原來的（無用的）啞無線WAP瀏覽器那樣有限。通常沒有必要輸出「手持」類型，因爲手機瀏覽器比網站更好地決定顯示內容的方式/方式。

來源

2011-08-23 19:10:43

那麼有什麼更好的方法來做到這一點？假設我的網站將在移動設備上正常顯示（它可以正常顯示，但我有一個手機特定的樣式表，可以很容易瀏覽）或使用其他方法選擇樣式表？ – muttley91

大多數網站使用瀏覽器嗅探來弄清楚要提供哪些css。您也可以根據源IP做出一些粗略的決定 - 這可以通過移動數據捕獲移動用戶（但不包括WiFi上的智能手機用戶）。 –

Twitter引導使用設備的寬度來查看用戶正在使用的設備。你可以查看：http://twitter.github.com/bootstrap/scaffolding.html#responsive –

根據w3schools手持媒體類型反正過時。您將需要使用媒體查詢來完成您想要的功能。

太糟糕了，沒有「手機」的媒體類型。撥打號碼的能力真的是最顯着的區別。

來源

2015-04-17 21:35:16

如何爲HTML鏈接標記的手持設備使用媒體屬性？

回答

相關問題