I want to create a responsive website. If the browser is mobile sized, the content should be displayed with an iPhone Style List View If the browser is desktop sized, the content should be displayed with tabs:
What is the best way of doing this? I don't want to use separate files for Mobile/Desktop. I want it to be responsive.
Here is some of the research I have done.
Attempt 1: Pure CSS solution.
A pure CSS solution would be the best, as CSS offers media queries which makes it easy to switch between layouts. CSS offers methods for creating tabs. But it doesn't seem to offer a method for an iPhone style list. (You can almost fake it with an accordion list but this doesn't take the user to a separate page like on a true iPhone app).
Attempt 2: Jquery Solution (see Fiddle)
- Jquery Mobile offers an easy way to create iPhone style list views
- Jquery UI offers an easy way to create tabs.
- Enquire.js offers a Javascript equivalent for media queries.
In this fiddle, I have tried to combine Jquery Mobile and Jquery Ui. Enquire.Js is used to call the