Couple of thoughts on this for the future. After the release of the next version of RN I'll be working on a theme (amongst other things, lol) that supports braille, screen readers, etc.
For this I will need to create a lite/basic navigation, and thought maybe we could also use it for mobile devices as well. This would be set to display:none; so it could be activated via CSS.
Maybe we can pool our efforts on how that navigation is built. For my purposes it needs to be small, no more than 4-5 links.
That also got me thinking if you could target mobile devices by their resolution. Since I don't have a mobile device, if you get bored try this, substituting the resolution(s) and css file you are trying to target. I believe this has to be included after your main css and ravennuke.css to work; so I would do the same as we do with js files and include those core css files first.
Code:$inlineCSS = '<link rel="stylesheet" media="only screen and (min-width: 701px) and (max-width: 900px)" href="mobile.css" />';
addCSSToHead($inlineCSS, 'inline');
|
(the
media="only should keep older browsers from loading)
If that code actually works and we come up with the aforementioned mini-nav, you might be able to avoid UA sniffing and adding new regex patterns everytime a new device comes out... Also curious how reliable using
media="handheld" would be.
Code:$inlineCSS = '<link rel="stylesheet" media="handheld" href="mobile.css" />';
addCSSToHead($inlineCSS, 'inline');
|
Anyway, food for thought while it was on my mind. Also, I'll have a more efficient method for adding media specific and alternate css in the not-too-distant future.. instead of using the inline method as above.