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。