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。
我漏掉了什么？

- Andrea Ambu

Answer 1

Nokia N78使用S60浏览器，仅读取“screen”样式表，不会读取“handheld”样式表，也不支持媒体查询。请阅读此文章，按照其中的说明解决问题-http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

- dalizard

Answer 2

以iPhone为例：

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

我不知道这个功能适用于哪些浏览器/设备，我只开发过iPhone的移动设备。但我相信你可以在你的诺基亚上尝试一下。

更多关于媒体查询的信息

- Ryan Florence

Answer 3

Opera Mini使用媒体类型屏幕，因为它最适合其行为和能力。但是，如果您切换到移动视图模式，它将使用手持设备样式表。有关更多信息，请参见开发者看 Opera Mini 5 beta 2。

- Gerald Senarclens de Grancy