Should I use landscape and portrait together like
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
OR separate like
#media only screen and (min-width : 321px) {} for landscape
#media only screen and (max-width : 320px) {} for portrait
Or all together? Whats the difference here?
The top query will only target screen widths between 320px and 480px.
#media only screen and (min-width : 321px) {} will target anything wider than 321px.
#media only screen and (max-width : 320px) {} will target anything smaller than 320px.
You could add something like #media only screen and (min-width: 320px) and (orientation: landscape) {} which will only return true if the device is 320px or wider and in landscape.
(orientation: portrait) is also allowed in media queries.
You can do them together if you put the orientation with the media query
#media only screen and (max-device-width: 320px) and (orientation: landscape),
#media only screen and (max-device-width: 480px) and (orientation: portrait) {
/* styles here */
}
Related
How to target all landscape devices below 1024 using css media query this should work only for mobile devices not desktop browsers
You can try it like this
#media only screen
and (min-device-width: 1024px)
and (min-device-pixel-ratio : 2.0)
and (orientation: landscape) {
//styles here
}
In below Media Query CSS will be affected to devices where maximum width is 1024px. That means devices where screen width is less than 1024px will be affected from this.
#media screen and ( max-width :1024px) and (min-device-pixel-ratio : 2.0)
and (orientation: landscape){
.your_CSS_Class{
//your styles
}
}
#media only screen
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
//your styles
}
i have make a sence and it works only for ipad-pro (1366*1024) landscape. It dont disturb my 1366*768 device viewport. let me show the code below:
#media only screen
and (min-device-width: 1025px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){selector{
background-size: 100% 75% !important;
background-position: center top 188px!important;
background-repeat:no-repeat;background-attachment: fixed;
}
}
now i need another media query which can work only for 1366*768. i edit the upper one for 1366*768 but it cant work. I think i help you make understand what i actually want: please help somebody!
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
Try this and check.I don't have an iPad Pro but this works for me in the Chrome simulator.
I want to add media query to specific device ipad pro of size 1366*1024 height width and height.How do i add media query to to that size targeting only that width and height.Not less than 1366 or greater than 1366 !!!
Copy pasted from here
#media (min-height: 1024px) and (min-width: 1366px) {
/* CSS stuff */
}
Don't forget <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta tag on header too.
#media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px) { /* STYLES GO HERE */}
Reference link
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}
You can also specify if you want to set over portrait or landscape:
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}
/* Landscape */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}
I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)?
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width: 1200px) and (max-width: 1823px) {}
#media only screen and (min-width: 992px) and (max-width: 1199px) {}
#media only screen and (min-width: 768px) and (max-width: 991px) {}
#media only screen and (max-width: 767px) {}
#media only screen and (max-width: 480px) {}
#media only screen and ( orientation: portrait ) {}
#media only screen and ( orientation: landscape) {}
I think thats what you are looking for.
Edit:
I think by fit in to my css you mean this:
#media (max-width: whatever) and (orientation: landscape) {}
If you are asking for a suggestion that when to use portrait or landscape, then use landscape when width of viewport is more and vice versa.
max-width: 1024px will set an upper limit and it will not interfere with rules for range: 1200px-1823px.
We have to add orientation: portrait and orientation: landscape to your media screen.
iPad Landscape and Portrait
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* ur CSS */
}
/* iPad Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
For latest iPads use pixel ratio:2 (Retina display) .
-webkit-min-device-pixel-ratio: 2
Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.
When I look on my iPad on landscape view, the CSS Media query max-width: 992px is not working and the responsive layout is still visible (but on desktop it breaks at 992px). Any help is appreciated.
<meta name="viewport" content="width=device-width" />
My CSS media queries:
.responsive_button{display:none;}
#media only screen and (max-width: 992px) {
.responsive_button{display:block;}
}
#media only screen and (max-width: 768px) {}
#media only screen and (max-width: 480px) {}
#media only screen and (max-width: 320px) {}
iPad resolution is:
768px by 1024px (Portrait)
1024px by 768px (Landscape)
If you want to target ipad's different orientation use the below media queries mind that the orientation is specified as well.
iPad in Portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad in Landscape:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
An iPad's resolution is 768px by 1024px, this means in landscape mode, it is 1024px wide. The media query will not be active as 992px fits onto the 1024px wide screen.
As a general rule, iPads in landscape mode should just be treat as desktop screens.