I have media queries written this way :
#media only screen and (max-device-width: 600px) and (orientation: portrait) {
.img-responsive{
height : 200px;
width : 100px;
}
}
#media only screen and (max-device-width: 600px) and (orientation: landscape) {
.img-responsive{
width : 95px;
height : 100px;
}
}
Portrait orientation works fine but for landscape orientation css doesn't seem to apply.
swapping resolution worked for me, though i only tested in chrome
#media all and (max-width: 768px) and (max-height: 1024px) and (orientation:portrait) {}
#media all and (max-width: 1024px) and (max-height: 768px) and (orientation:landscape) {}
There is an issue I've just met with and I think it's the same...
When you are checking your app with inspect mobile simulator there is a zoom option on the top bar. If the zooming value is less than 100%, somewhy CSS doesn't see the orientation as landscape and ignores all the CSS of that #media (I think it's a browser problem). Chrome and Opera have that zoom option and on both browsers, you have the same problem (not on Firefox).
So there are 2 options:
Always check your app on 100% zoom level.
Or if you think that browsers work correctly in this case...
Don't use "orientation" in your media query,
if you are not sure you need it.
Related
I am implementing a HTML application based on responsive design.
I am using "#media only screen" for responsive styling.
I am using the below Css Code for mobile orientation(Landscape/Portrait):
#media only screen and (max-device-width: 465px), screen and (max-width: 465px)
.align {
width: 33.33%;
}
#media only screen and (max-device-width: 736px), screen and (max-width: 736px)
.align {
width: 25%;
}
The first one is for vertical and second one is for landscape styles.
The issue is when I changing the browser orientation form Portrait to landscape, the Portrait style is not removed in css both styles are in enabled state but if I reduce the browser size the vertical style is removed and the landscape style is taking the responsibility.
So How do I remove the unwanted style from my page without changing the browser window size.
You can provide some additional condition with orientation
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
We can also define the css without orientation I think, by defining the media width is enough for styling
#media (max-width: 465px){
//Do your styling here
}
#media (max-width: 1024px){
//Do your styling here
}
This will help u style the css not only for mobile portrait and lanscape but also for device that are in screen size.
Been doing media Queries for Iframe. This two media queries below works fine for iframe when editing the Height and width
min-device-width: 768px) and(max-device-width: 1024px)
min-device-width: 600px) and (max-device-width: 960px)
However when queries on htc phone it does not do anything with its size..
min-device-width: 360px)and (max-device-width: 640px)
Here is my code
#media screen and (min-width: 360px) and (max-width: 640px),(min-device-width: 360px)and
(max-device-width: 640px) and (orientation : landscape)
{
/* CSS */
.wrap{
width:75%;
}
.iframe {
max-height:30vh;
max-width:30%;
}
.html{
background-color:red;
}
}
even the background colors not working when try to do a troubleshooting
It might be due to the device high-resolution, and thus queries never get triggered. Try specifying the resolution units on your media queries.
Otherwise just use min-height and min-width media queries. They're more reliable.
How can I apply the css only for desktops and laptops browser excluding ipad and mobile browsers?
#media only screen and (min-width: 742px) and (max-width: 769px){
#element{
display: none;
}
}
How can you guarantee a user isn't going to view your site/webapp on a desktop device that falls into the viewport width you have stated? You can't.
If really need to be that specific, device specific as apposed to using viewport width, you can sniff the browser I guess.
Here is a quick jquery demo here using:
navigator.userAgent
http://jsfiddle.net/y3ds0xpv/ - note: you'll need to view on a mobile device to see the difference between desktop and mobile.
Ultimately, I'd recommend using this if you need to use this method:
http://detector.dmolsen.com/
You could always do it like this (modified from here):
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
#element{ display: none; } /* your css rules for ipad portrait */
}
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
#element{ display: none; } /* your css rules for ipad landscape */
}
I'm sure you have a valid reason for doing this but I'd be careful. As a rule you should detect features, not devices.
A media query to target iPads (portrait and landscape) would be:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
so to avoid targeting iPads you can just reverse that and get everything larger and everything smaller..
#media only screen and (max-device-width:768px),(min-device-width:1024px) { }
#media only screen and (max-width: 769px){
#element{
display: none;
}
}
#media screen and (min-width:1000px){
#element{display:none;}
}
Using Foundation framework you will have options for all screen sizes be it desktops, tablets or phones. Using their 'large', 'medium' and 'small' functions. It is fairly easy to use.
With Foundation your problem would be fixed by just adding hide-for-small and hide-for-medium classes to the div being displayed only on desktop.
Finally, I got working media query only for desktops or laptops browser:
#media only screen and (min-width: 742px) and (max-width: 769px),
not all and (min-width: 742px) and (max-width: 769px) (orientation: portrait){
#element{
display: none;
}
}
Glad to say, it is working nice.
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.
I am new with using media queries.
I am working on a website which I want it to be correctly displayed on Ipad.
I have tried this,
//css use for Ipad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.overlayBox{
width:200px;
}
}
// css use for Window
.overlayBox{
width:450px;
}
But i am having problem that media queries doesn't work for Ipad. It takes window css.
Am I doing something wrong?
Use device-width and device-height to target specific devices, then use orientation to target portrait or landscape.
#media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.myrules {
width: 200px;
}
}