I want to create a mobile version of my website (web community). When I started I just noticed the issue, that positioning of display elements should be different for horizontal vs. vertical screens. And it should even (if possible) switch, if the device is turned around.
The intent is to write a normal web page (HTML, CSS, JavaScript) while avoiding the need of JavaScript, if possible
For Android Apps (UI-Thread) you usually can put two layouts in your source code… is there something similar available for CSS?
What answers do I expect?
- Some CSS examples how to do that, if possible.
- Additional: Some handy tutorials for creating mobile versions of existing pages, which you think that the’re helpful (but: main focus is on screen horizontal/vertical)…
What you’re looking for is ‘responsive web design’. This allows you inside your css – to detect layout, trigger javascript events when layout changes, and position your CSS elements based on width/height of the screen.
I can recommend this slide deck as a good starting point: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/