I have used this media query :
#media only screen and (min-device-width: 1366px) and (max-device-width: 1024px) and (orientation: landscape) webkit-min-device-pixel-ratio: 2) {}
but this code isn't working in chrome ipad pro extension. please any one help.
i think you have misplaced the values. try this :
#media only screen and (max-device-width: 1024px) and (min-device-width: 1366px) and (orientation: landscape) webkit-min-device-pixel-ratio: 2) {}
Related
I am using
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {}
to target the iPad Pro 12.9 inch
and
#media only screen and (min-device-width: 768px) and (max-device-width: 1023px)
and (-webkit-min-device-pixel-ratio: 2) {}
to target all the other ipads.
In this case the new iPad Pro 11-inch uses the same media query of the "old" ipads even if it has a higher resolution. I need to target it differently.
If it helps it has: 2388-by-1668-pixel resolution at 264 pixels per inch (ppi)
Thank you
The following CSS works in Chrome simulator but it would be wise to test it on an actual iPad Pro.
/* ----------- 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) {
}
You could also change the values of 1024px to 2388px and test it out.
I'm currently working on a project where it needs to be user friendly for multiple devices but came across issues on devices themselves when targeting devices with one of the two viewport that a re the same and still not able to find a solution for it.
I am using media queries to archieve this, of course sounds far enough but there is no explanation online to separate an iPad mini with this syntax
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait) {}
And an iPad Pro
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : portrait) {}
I am testing with the Chrome devtool for devices and is fine when i start with the biggest ipad but when i then go on with the smallest(mini), it overwrite the previous changes because the css is read from top to bottom so i am so confused please guys can you help me to understand better this concept?
Also for mobiles i have this multiple lines of code one for each mobile (iPhone 5, 6 ,6+ but still same issues)
iPhone 5
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6+
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {}
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}
Literally I don't know how to be more specific then this but also here the iphone 5 because is the last one in the css is overwriting some stile in the iphone 6 or 6+.
How about writing different style sheets for each device
I would use just min-width instead of min-device-width and similar. A 768px x 1024px device with retina display (iPad Mini) actually has 1536px x 2048px device pixels (if the pixel taio is 2:1), so you either have to use the true device pixel size or use CSS pixel size.
I just want to target with media query a galaxy tab 3.
According to its resolution (1280 x 800) it should be:
#media (max-device-width: 800px) and (orientation: portrait) {
}
#media (max-device-width: 1280px) and (orientation: landscape) {
}
The problem is that some iMacs has this same resolution, and my fix to Galaxy Tab 3 affects this device. Any way to not affect imac?
Thanks in advance
There's no way to do device-specific media queries, unfortunately, but there is a solution. From a practical design perspective, what makes the iMac and the Galaxy Tab different if they're the same resolution? Their DPI. That's something you can query for! Accroding to http://tablets.findthebest.com/l/232/Samsung-Galaxy-Tab-3-7-0 it's 169 ppi.
#media (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi) { }
#media (max-device-width: 1280px) and (orientation: landscape) and (min-resolution: 169dpi) { }
You might need to do -webkit-min-device-pixel-ratio as well, but I can't tell you what the Tab's default ratio is (probably 1.5, but you can check here: http://bjango.com/articles/min-device-pixel-ratio/ )
#media
(max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi),
(max-device-width: 800px) and (orientation: portrait) and { }
#media
(max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) (min-resolution: 169dpi),
(max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) { }
I am developing one website for mobiles and tablets. for iPhone 5 i am using
#media only screen
and (max-device-width: 320px)
and (orientation: portrait) {}
and
#media only screen
and (min-device-width: 568px)
and (orientation : landscape) {}
and for ipad I am using
link rel="" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href=""
link rel="" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait )" href=""
but both are merging , don't know how.
Is there any other way to use ?
Use only '#media screen and (max-width: Xpx)' at the bottom of your css file.
This Chrome app https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh will give you all the most common screen sizes for you to auto resize your browser windows.
Just use a number a little larger than the screen width, to have a margin of error, and you are good to go.
I like to use:
#media screen and (max-width: 1100px){}
#media screen and (max-width: 660px){}
#media screen and (max-width: 500px){}
#media screen and (max-width: 400px){}
I had a concern. I'm putting together a little site and for some reason my iphone and ipad media queries are colliding. The Iphone picks up on Ipad styles, but not vice versa. So I wanted to put what I'm using out there and see if anyone can help.
thanks guys.
#media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
#media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
#media screen and (max-device-width: 1024px) and (orientation:landscape) //ipad landscape
#media screen and (max-device-width: 768px) and (orientation:portrait) //ipad portrait
I pulled these from a few tutorials that seemed pretty legit, any ideas why the styles are leaking?
You're using max-device-width which will include iphone as well. Should be:
#media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
#media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
#media screen and (min-device-width: 1024px) and (orientation:landscape) //ipad landscape
#media screen and (min-device-width: 768px) and (orientation:portrait) //ipad portrait
notice the min-device-width