Different Style for certain resolutions
 

I have a style that doesn't work too well on an iPad or other smaller screen device so I would like to have an adjusted style with some elements removed for screens equal to or under 1024x768.

I have a cookie created that lasts an hour using Javascript in my headers so the forum can get access to the resolution (I would have done it via a plugin but I don't believe you can run Javascript in a plugin) and I currently have the sidebar disabled on smaller screen devices via a plugin using this information.

I have tried using this information to set a different style on a temporary basis but nothing I tried seems to work. Tried various pieces of code using a combination of snippets I have found on the net and also having looked through some of the core files to get ideas but nothing works.

I could perhaps just do a template replacement for specific parts but I have searched the forums here trying to find threads on doing this but I haven't been able to find one that deals with the subjects comprehensivly.

So does anyone here have any pointers or tips to help me on implementing this or suggestions on what the best way to implement it will be. Any help or advice is appreciated

We did something like that, I ended up defining a javascript function that checks screen.width and returns a different class name depending on the width. I then put a call to that function in a bunch of html tags that had a class name. Looking at it now I wonder why I didn't just put javascript in the CSS definition so it would only be called once - there may have been a reason, or it may just have been laziness or ignorance :) ). Anyway, it works - it lowers the font size a bit if the screen width is < 1100, which was just enough to make our layout fit on a 1024 display.

Pretty sure that if the decided they wanted to use the regular style though, they would be continuously redirected based on screen resolution because the script would just run again on the main style and see they have a small screen and redirect them back to the 'mobile' style.