CSS media type: How to load CSS for mobile?

css mobile opera-mini media-type
Andrea Ambu picture Andrea Ambu · Aug 8, 2009 · Viewed 56.8k times · Source

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?

Answer

dalizard picture dalizard · Aug 8, 2009

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

Related questions

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More
Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More