Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 599
Andrea Ambu Avatar asked Aug 08 '09 12:08

Andrea Ambu


People also ask

How does CSS media type work?

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

What is media type in CSS?

CSS 2.1 defines the following media groups: continuous or paged. visual, audio, speech, or tactile. grid (for character grid devices), or bitmap. interactive (for devices that allow user interaction), or static (for those that do not).

Where do I put media queries in CSS?

Important: Always put your media queries at the end of your CSS file.

How do I link media queries in HTML?

The Placement of Media Queries The internal method includes adding the <style> tag to the <head> tag of the HTML file, and creating the media query within the parameters of the <style> tag. The external method involves creating a media query in an external CSS file and linking it to your HTML file via the <link> tag.


1 Answers

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

like image 131
dalizard Avatar answered Sep 19 '22 00:09

dalizard