I am using Cordova to make a hybrid app.
I have the following media queries in my css file
#media only screen and (min-device-width : 320px) and (orientation: portrait) {
/*css goes here*/
}
#media only screen and (min-device-width : 320px) and (orientation: landscape) {
/*css goes here*/
}
and similarly media queries for all sorts of device width in both portrait and landscape orientation.
When I test my app on Nexus 4, it doesn't detect the orientation change and change the css, example, if I start the app in portrait mode, then based on the device width it picks up the media query of that width in the portrait mode, however if then I change the orientation of the phone, it doesn't detect the new width and apply the new css of the corresponding width and landscape orientation and vice versa.
Am I missing something here, isn't CSS Media query supposed to detect the change in orientation by itself and apply the appropriate CSS?
I also had an issue with this, where I would have a specific media query for portrait landscape and another for landscape, and it would switch fine from portrait to landscape the first time, but when you went back it wasn't updating.
#rockStar should get the credit for the answer, but using min-width instead of min-device-width did the trick for me as well.
Sorry i have been busy with my studies lately so i couldn't check stuff around here this days, Upon request,
using min-width is better than using min-device-width
and the reason would be in here.
Try using a CSS selector based on portrait and landscape mode, i.e you can use a class in landscape mode and apply css and remove the class when in portrait mode and apply css. So basically you can check whether a class exists or not.
Related
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 am creating an android app using web view.My app always open in landscape mode.I need different UI for mobile and tab(both in landscape mode).How to set landscape media queries for tab and mobile in css?
For a media query to set to landscape, you need to use the property orientation like this :
#media all and (orientation: landscape) { ... }
To aim only mobile, tabs, computer screens, you need to use the rule screen. So the final result is something like this :
#media screen and (orientation: landscape) { ... }
I read the iPhone 6/7 (S or not) has a browser width of 375px.
However, I am writing a simple #media query like this:
#media only screen and (max-width : 375px) {
....
}
I found out that is not working until I increase the max-width to exactly 980px.
Why is that?
How can I make a #media query that treats the phone like it has 375px? I don't care how dense is the screen resolution, it is a small phone and I want to apply a phoney web design, without destroying the design for devices like tablets or small laptops with around 1000px resolution.
Ideally it should work with col-xs-X bootstrap's styles.
There is definitely another media query or default style overriding this.
Your media query is correct, but ALWAYS MAKE SURE that your media query is at the very end of your style.css file (Or whatever the name is).
I have a set of rules I'd like to apply to all screens smaller than 960px wide.
The obvious was:
#media only screen and (max-width : 959px)
However this fails with iPad in portrait mode. I've read that iPad reports its width and height the same regardless of orientation.
Is there a standard way of making sure the iPad (or other devices that use the same logic as the iPad) respect actual width being viewed?
Obviously I'd prefer to avoid "iPad-specific" rules, or orientation queries - the query should apply to any screen less than 960 pixels wide.
Thanks.
Try using #media only screen and (max-device-width : 1024px) instead. That should cover an iPad in landscape or portrait.
I've read that iPad reports its width and height the same regardless of orientation.
This is tricky. The iPad reports the same max-device-width regardless of orientation. However, it correctly respects different max-width at different orientations/widths. The device is the part that doesn't change.
Hope this helps.
I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.
So the div will expand when in landscape mode and shrink up a bit in portrait.
Any ideas?
Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).
I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.
With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles here */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles here */
}
Check out this example page for more explanation, or this one.
EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.
You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.
Quote from w3.org about the ‘orientation’ media feature:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A note/quote from developer.mozilla.org about the "orientation" feature:
Note: This value (ie portrait or landscape) does not correspond to actual device orientation.
Opening the soft keyboard on most 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.
So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.
JSFIDDLE DEMO (try resizing the view port)
Here are the representative media queries affecting portrait and landscape orientation.
#media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}