I'm working on a responsive theme. One part is a sort of news flow (blog). In desktop widths (above 767px) the news template is vertically divided in two. The left part is a navigation which lists titles and dates linking to the actual news item. The right part is where the content displays. "Posts page" is set to this page and "Posts per page" is set to 1, and thus the right content area displays one news item at a time.
This vertically divided template structure works well in desktop widths but not so much on smaller widths. So for widths less than 768 I'm having a more traditional approach with the left nav part removed and the content displaying at 100% width (all through media queries). In a case like this "post per page" would be set to like 5-7 posts.
So how can I change "posts per page" depending on sreen width? Or are there some other way to accomplish this?