CSS媒體類型：如何爲移動設備加載CSS？

Question

有了這個代碼：

<link rel="stylesheet" 
     type="text/css" 
     href="media/css/mobile.css" 
     media="handheld" /> 
<link rel="stylesheet" 
     type="text/css" 
     href="media/css/screen.css" 
     media="screen" /> 

我N78諾基亞的默認瀏覽器，Opera Mini的負載screen.css而不是mobile.css。
我錯過了什麼？

Answer 1

諾基亞N78使用S60瀏覽器，它只讀取「屏幕」樣式表。它不會閱讀「掌上電腦」。它不支持媒體查詢。而不是想在這裏輸入的一切，看看這篇文章，你會解決這個問題 - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

Answer 2

使用iPhone作爲一個例子：

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

我不知道哪些瀏覽器/設備這樣做並不適用於。我開發的唯一移動設備是iPhone。但我敢肯定，你可以用諾基亞輕鬆一擊。

More on media queries

Answer 3

的Opera Mini使用的媒體類型的屏幕，因爲它適合它的行爲和能力最佳。但是，如果切換到移動視圖模式，它將使用手持式樣式表。有關更多信息，請參見A developer’s look at Opera Mini 5 beta 2。