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.
Actually no. I am very familiar with use of the HTML DOM, mostly using C#.
So the orientation media query does not support desktop devices and is incompatible with them. That is important to know.
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.
But then again I could be wrong
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.