Currently I'm working on a webApp which will be displayed on two different TV screens.
One will be in landscape mode, and the other one will be in portrait mode.
So, I coded this app with CSS media queries to make it adaptable in those two configurations and for different resolutions.
I used queries like this for example:
#media screen and (orientation: portrait) and (min-width: 2160px) {
}
#media screen and (orientation: landscape) and (min-width: 3840px) {
}
The application is working perfectly fine on browser.
But when I try my app on vertical screen, obviously the TV display it on landscape mode (because this is just a screen which is rotated).
But the problem is, when I change the parameters on TV options to display the image as portrait, the app has just rotate and the image has expand to the border of the screen. None of my CSS media queries has done this work like on the browser.
If someone have a technical explanation and/or solution, I'm looking forward to hearing from him/her.
Thanks
I'd like to try to work out a method of adaptive webpage design to coexist with both mobile and desktop browsers.
At first it looked like using Media Queries in CSS was what I needed, so I went with that, but it looks like Google Chrome is messing up what I wanted to do.
Compared to most browsers, for the most part only mobile browsers respond to the orientation media query, which seemed to be a good way to target a mobile browser, no matter the screen size. However, for some reason, Google Chrome not only responds to this, but will actually select Landscape and Portrait depending on the dimensions of the viewport (the window itself) and has nothing to do with the position of the screen itself.
This brought me to another potential idea. I noticed that on my mobile devices, device-width and device-height will swap positions depending on landscape and portrait modes, while Google Chrome on a desktop always reports the monitor's proper dimensions, even when Chrome thinks the window size qualifies as Portrait mode.
What I'm hoping to do is figure out a way to make a media query that determines if the device-width is greater than device-height. This should allow me to determine the true orientation of the screen, regardless of viewport size and Chrome's orientation value.
My eventual goal is to be able to design a page with a specifically mobile-friendly layout for any device that reports Orientation: Portrait AND the Device-Width is less than Device-Height, which should only ever happen on a true mobile device in portrait mode (or the rare sideways PC monitor, which I don't mind accidently targetting), while serving a landscape/desktop friendly layout to any device with a screen that is wider than it is tall.
I am adamantly avoiding using any form of Javascript, useragent query, or server-side scripting to accomplish this. Media Queries seem to be the fastest and least costly (processing wise) method to have a page that actively shapes itself to the current device and will also shift its position in real-time as the mobile device rotates between orientations.
My ultimate question for this post is: Can I specify some form of expression in a media query in CSS that will simply compare the Device-Width and Device-Height and display one style when the width is greater than height, and vice versa?
Something like:
#media screen and (device-width > device-height) //true landscape mode
#media screen not (device-width > device-height) //true portrait mode or square screen
After some tweaking and testing, I came up with the following combination of media queries that seem to do what I'm trying to accomplish.
#media only screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1)
//This targets any screen that is in true Landscape orientation, including desktop browsers. This should also target square screens where the browser reports landscape orientation.
#media only screen and (orientation: portrait) and (min-device-aspect-ratio: 1/1)
//This targets strictly desktop browsers that have a window resized into what the browser considers "portrait" mode. This works in Chrome, Firefox, and MS Edge (haven't tested others). More specifically, this targets any browser that reports portrait mode, but where the screen is actually in landscape position. This may also target square screens where the browser reports portrait orientation.
#media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//This strictly targets devices that are actually in portrait orientation, mainly mobile devices (although it may target desktops with rotated monitors)
This may also target square screens reported to be in portrait mode, so you may need an additional query that targets exactly square screens.
I'm happy that you got the way to do what you where looking for, but I think readers should take in account a couple of things:
First, as you said, Monitors can also rotate, in fact is very common in offices to see that kind of monitors.
Second, in mobile you can also have a Landscape viewport in Portrait orientation or viceversa, as you can split the screen in two.
Third, devices such as the Pixel 2XL and iPhone X have a proportion of 18:9 and 19.5:9 respectively, which means that half screen will return Landscape.
Finally, what really matters is the viewport orientation because is what determines the content area, whether is a desktop or a mobile screen. If you resize your desktop window you should also thing about doing some responsive to optimise your available space.
As bonus, in iPhone width referes to viewport while device-width refers to the screen width, which, unlike Android, is always the larger side of the screen.
I'd love to have an easy answer to your question, but there is not. Doing responsive is not easy. Maybe this article (EN) can help you. It gives some clues to split between Desktop vs Laptop, Laptop vs Tablet and Tablet vs Mobile.
I'm creating a landing page and I need it to have slightly different height in IE for desktop and modern IE (in Windows 8.1). Can I do that with media queries? I tried binging and googling but couldn't find anything.
Thanks!
Short answer: no.
Media queries will help you if you need to respond to the viewport size. For example
#media screen and (min-height: 900px) {
/* rules for tall viewports */
}
While you can be sure that IE metro/modern will be the full height of the display, you can't necessarily differentiate that from IE desktop in full-screen mode (i.e. F11), and of course your page may be viewed from a variety of devices with different display dimensions (including rotatable devices in portrait or landscape orientation).
I don't want landscape view to appear when a phone is rotated to landscape, only a tablet-sized device. I'm using em's for measurement but it's hard to pick a good cutoff. The Nexus 4 (for example) is 61.5em wide in landscape (an iPad is 1024 or 64 em) which is very wide but landscape view looks poor on that phone. Is there a good solution?
You may need to setup device specifics for each device resolution. I'm not aware of any specifics that determine if you are looking at one specific device. Some phones are much easier to detect (like iPhone 6+) since they have specific abnormal resolutions. I know the #media handheld is ignored on many devices so that doesn't help much but give it a shot.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can add an orientation for a deeper test as well. Something like
#media (min-width: 1024px) and (orientation: landscape)
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
I've built a nice template that has four different layouts using #media queries:
850+px width
<850px width
iphone landscape
iphone portrait
It works awesome, until you size your monitor window down to below 480px (iphone landscape) and then it starts picking up the smaller size #media queries.
Is there any way to avoid this?
I personally feel like it's desirable to display the "iPhone" layout at smaller browser window sizes, as your content has likely been optimized for that layout, HOWEVER, if you really want to prevent this you can play around with the device-width property in your #media declaration. Something like #media only screen and (max-device-width: 720px) { ... } will target device width rather than viewport width. Compare the behavior of this (viewport width) vs this (device width). Play around with the values (change min to max, change the pixel sizes, etc.) and observe the behavior. Also, don't forget that you can combine #media rules, e.g. #media (min-width: 400px) and (max-width: 600px) { ... }. See what works for you.
The problem with this method is that mobile devices come in all shapes and sizes, so you might be serving undesirable styles on a different mobile device (let's just say an Android phone...) that you hadn't planned on. However, depending on your needs, this might not matter to you.
Here is a list of example media queries and sizes to guide you, if you do decide to go this route: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (sorry for the lack of a working link; apparently I'm not cool enough on StackOverflow to post multiple links yet)...