I have found Managing screen orientation - Web APIs | MDN that uses all HTML, CSS and responsive design (no JavaScript) to automatically place content on the side (vertically) for landscape orientation and along the top (horizontally) for portrait orientation. The sample however seems incomplete to the extent that the style used for the toolbar list affects other content in the page. Specifically, lists anywhere in the page get the style set for the toolbar list. Did they do that because it is not possible to separate the toolbar style from the rest of the page or is it possible to do that but they just did not in the sample?
If it is possible then I am willing to learn CSS better to figure it out. If it is not possible then I will pursue alternatives such as JavaScript. I can figure it out using JavaScript or server-side code.
Oh I am sure it is because of simplicity and demonstration purposes. You can 100% for certain style the toolbar and list separate from all other lists. You can style every single list to be a completely different style if you like. CSS is all about specifying as broad or as specific styling as you want for your elements. CSS is very powerful for styling and layout. I suggest you learn all about that before moving onto JavaScript alternatives. The reason is that even the JavaScript solutions usually assume you know CSS and actually alter CSS styles themselves.
But yeah that demo is very simple just to give you an idea but it can be as specific as you want.
Unless you are designing only for mobile and not desktop (or just designing a mobile app perhaps) then there **seldom ** is a need to use the orientation media query. Indeed you may be doing a dis-service to your desktop users who happen to have their browser windows open at odd sizes (although the orientation media query will apply when viewport height is greater than viewport width etc).
Ultimately it’s your design that will dictate when a layout should change and not whether someone switches their device to the side or has greater height than width. Some old phones in landscape mode are narrower than some new phones in portrait mode so you would flip one and not the other which is nonsense.
What you are mainly concerned with is how much space your design needs to work properly and then you use a media query at that point. In that way you cater for all devices whether portrait or landscape.
I’m not saying don’t use the orientation media query but I haven’t needed to use it once in the last 100 sites I’ve coded. As mentioned if this a mobile app or a site just for mobile then it may be of use but just remember that not all devices are the same size and in the end its your design that should dictate at what width it has to change.
Also remember that when the keyboard pops up on devices it will often cause the orientation change to occur and the display would suddenly switch while users are trying to enter data. I’ve seen this happen and is almost impossible to use like this.
Note:This feature does not correspond to device orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
Yes it does support them (I only tested on Chrome) and is activated when width is greater than height or vice versa. The problem is that it doesn’t really make sense on a large desktop to do that.
If CSS responsive design messes up the layout for desktop devices then there is something I am missing.
Landscape and portrait orientations should be determined by the relative sizes of the height and width and only by that and the determination should not affect anything independent of that. A desktop normally is in the landscape orientation and when it is CSS responsive design should choose landscape orientation.
Also, when I put that Mozilla sample in a web page and then resize my browser window such that the width is smaller than the height then the CSS automatically moves the toolbar to the top. That is what I want since there is then more vertical space.
Actually my browser is nearly always in a portrait orientation as I like to work with a number of applications open at the same time. I rarely (if ever) have my browser maximized.
As I have said a number of times the main thing you need to control is the way your design looks at any size and then make adjustments accordingly.
If for example you have a very wide toolbar and you switch it to vertical then that may mean your user now has to scroll vertically to use it properly. Or alternatively if you flip a vertical toolbar to the top on portrait mode how can you be sure you have enough room for it ?
In the end you just have to make sure the design fits whatever space is available.
I don’t really see that orientation is useful unless it’s a mobile app or perhaps some type of dashboard set up.
If you do use the orientation media query then you still need to make sure that when you swap things around they still fit and work ok. If the layout is quite simple then you should be fine but it just seems like an unnecessary step to me.
I’m not saying don’t use it but just make sure your design still works when the change kicks in. It may be that your design will suit that approach but the demo in the Mozilla example looked poor to me.
