We’re working on a web app that will deployed to mobile devices, iPad, iPhone, Android. Instead of trying to filter out user agents to display different views, I’d much rather just have my CSS change depending on the width of the screen (that’s the only important thing here, really)
We’ve got something put together with jQuery, and I’ve changed the CSS for one part so that when the width shrinks, it doesn’t take up too much vertical space (shown below)
How would I go about implementing something like that on buttons like this:
Ideally I should be able to change the CSS or something similar so the buttons are stacked up all in a row if width is narrow enough to knock even one button off. After that I can work on making the buttons look correct.
The simplest way to change CSS depending on the page width is to use Media Queries, which require no JavaScript.
Here’s a great intro to Responsive Web Design from the guy who’s considered the originator of the concept:
http://www.alistapart.com/articles/responsive-web-design/
If you want to actually change page content based on page width, you’ll need something like RESS. Here’s a simple script for that, but it requires cookies and doesn’t adjust on screen resize, so unless you absolutely require it, media queries are a much better.