Rails, Javascript, and CSS

rubyonrails-talk
1

I've searched the histories and don't see a relevant discussion. I'm sure it's there, but I haven't found it.

I want to adjust the stylesheet loaded according to the user's screen resolution. I know there are browsers that don't report it (or not accurately), but that's what defaults are for. With the hard core gurus here, I'm sure some of you are doing that right now. I know (believe?) that this is going to require javascript. I've never had to marry javascript and rails code, so I'm not sure of the best way to approach this. Obviously, I want it to execute as the page is loading. Do I put this in the head section where it would normally be? Any and all hints you can give me will be greatly appreciated.

As always, thanks in advance ---Michael

2

Michael Satterwhite wrote in post #972068:

I've searched the histories and don't see a relevant discussion. I'm sure it's there, but I haven't found it.

I want to adjust the stylesheet loaded according to the user's screen resolution.

No you don't. Really, you don't. You want to design a stylesheet that looks good at any resolution. This is how HTML and CSS were meant to work. If you're doing resolution-dependent design, you've already failed -- the Web is not print.

This question really has nothing to do with Rails, and should be taken to a CSS list, but if you can explain why you think you need different CSS for different resolutions, I'll try to provide alternative approaches.

Best,

3

I've searched the histories and don't see a relevant discussion. I'm sure it's there, but I haven't found it.

I want to adjust the stylesheet loaded according to the user's screen resolution. I know there are browsers that don't report it (or not accurately), but that's what defaults are for. With the hard core gurus here, I'm sure some of you are doing that right now. I know (believe?) that this is going to require javascript. I've never had to marry javascript and rails code, so I'm not sure of the best way to approach this. Obviously, I want it to execute as the page is loading. Do I put this in the head section where it would normally be? Any and all hints you can give me will be greatly appreciated.

You don't have to use javascript - you can use media queries (http:// www.w3.org/TR/css3-mediaqueries/#device-width) to do things like have a stylesheet that applies only to screens of a certain size or bigger. I'm not sure how those interact with the varying screen densities around (eg even though an iphone 4's screen is twice as wide and twice as high as previous models, you'd probably want similar layout).