Change the whole content of site depending on monitor resolution

Question

In my site I am applying a stylesheet depending upon the resolution of the viewer's monitor. By using screen.width in javascript i do this. But now I have a doubt that can I use the same technique to change the whole content of the site depending upon the resolution, i.e, for higher resolutions more contents and for lesser, fewer. Or you please suggest me some other technique to do this.

Answer 1

You could detect the resolution and use this to apply a class to the body of your page and use this to tell CSS to show/hide certain columns. I can provide sample code if you let me know which framework / no framework you're working with.

Here is reallly basic example in plain javascript:

window.onload = function(){
 var resolution = 'res'+screen.width;
 document.getElementsByTagName('body')[0].className= resolution;
}

This also has the advantage that a page will always display regardless of whether JavaScript is enabled or not. If JavaScript is enabled you can tailor the page to the resolution, if not the user will still see your content.

Answer 2

Have your initial page load return an empty container and execute an ajax call that will populate it with the content. The ajax call can pass the resolution as a parameter so you can return the appropriate content accordingly.

Answer 3

As you're already serving alternate stylesheets based on the screen width, you can just set the content that you don't want for that given stylesheet to display:none.