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?
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.
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).
Important: Always put your media queries at the end of your CSS file.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With