CODEWITHSUNDEEP
cssmobileopera-minimedia-type
Andrea Ambu
Andrea Ambu

Reputation: 39516

CSS media type: How to load CSS for mobile?

With this code:

<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" />

on my N78 the nokia's default browser and opera mini load screen.css instead of mobile.css.
What am I missing?

Upvotes: 13

Views: 57724

Answers (3)

Gerald Senarclens de Grancy
Gerald Senarclens de Grancy

Reputation: 7344

Opera Mini uses the media type screen because it fits its behavior and capabilities best. However, it will use handheld stylesheets if you switch to mobile view mode. See A developer’s look at Opera Mini 5 beta 2 for more information.

Upvotes: 1

Ryan Florence
Ryan Florence

Reputation: 13483

Using the iPhone as an example:

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

I have no idea which browsers/devices this does and does not work for. The only mobile device I've developed for is the iPhone. But I'm sure you can give it a shot with your nokia.

More on media queries

Upvotes: 9

dalizard
dalizard

Reputation: 471

Nokia N78 uses the S60 browser, which reads only "screen" stylesheets. It won't read the "handheld". It doesn't support media query. Instead of trying to type everything here, have a look at this article and you will solve the problem - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

Upvotes: 19

Related Questions