CSS: Target Galaxy Tab 3 Only with Media Queries - css

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: #) { }

Related

MEDIA QUERY For orientation: landscape but not desktop. how?

Here it will not contain it on the tablet because I am testing a tablet with a mouse on my computer:
#media (max-width: 1024px), (not: pointer) and (orientation: landscape)
And here it will also contain a desktop.
#media (max-width: 1024px), (orientation: landscape)
so How can I solve it ?
Thanks

How do you target the new 11-inch iPad Pro with media query?

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.

Media Query for IPad Pro not working in chrome

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) {}

Media Queries for all screen sizes

From Large Desktop Screen to Small Mobile Device: which are the Media Queries we should use?
I am bit confused with this. I am trying to get this clearly
/*Small Desktop*/
#media (max-width:1920px){
}

#media queries apply standard CSS only where the device's screen meets certain defined criteria (height, width, and pixel-ratio; mainly)
The best resource I've found for media queries is https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here's a snippet of the fantastic work there:
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}

What is correct media query for IPad Pro?

I have these two but they are not working. I'm simulating in Chrome
/* Landscape*/
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
If I remove 'and (orientation: landscape)' then the css in there works in the first media query.
What is the correct orientation, for both landscape and portrait ?
The HTML meta is set as
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

/* ----------- 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) {
}
I don't have an iPad Pro but this works for me in the Chrome simulator.

/* Landscape*/
#media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
Portrait medias query for iPad Pro should be fine as it is.
Landscape media query for iPad Pro (min-device-width) should be 1366px and (max device-height) should be 1024px.
Hope this helps.

Note that there are multiple iPad Pros, each with a different Viewports: When emulating an iPad Pro via the Chrome developer tools, the iPad Pro (12.9") is the default option. If you want to emulate one of the other iPad Pros (10.5" or 9.7") with a different viewport, you'll need to add a custom emulated device with the correct specs.
You can search devices, viewports, and their respective CSS media queries at: http://vizdevices.yesviz.com/devices.php.
For instance, the iPad Pro (12.9") would have the following media queries:
/* Landscape */
#media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }
/*Portrait*/
#media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }
Whereas the iPad Pro (10.5") will have:
/* Landscape */
#media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }
/*Portrait*/
#media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }

I can't guarantee that this will work for every new iPad Pro which will be released but this works pretty well as of 2019:
#media only screen and (min-width: 1024px) and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
/* ... */
}

This worked for me
/* Portrait */
#media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
#media only screen
and (min-width: 1112px)
and (max-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
}

Too late but may this save you from headache!
All of these is because we have to detect the target browser is a mobile!
Is this a mobile then combine it with min/max-(width/height)'s
So Just this seems works:
#media (hover: none) {
/* ... */
}
If the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none!
There are many cases that you can read from bellow links.
Described as well Also for browser Support See this from MDN

I tried several of the proposed answers but the problem is that the media queries conflicted with other queries and instead of displaying the mobile CSS on the iPad Pro, it was displaying the desktop CSS. So instead of using max and min for dimensions, I used the EXACT VALUES and it works because on the iPad pro you can't resize the browser.
Note that I added a query for mobile CSS that I use for devices with less than 900px width; feel free to remove it if needed.
This is the query, it combines both landscape and portrait, it works for the 12.9" and if you need to target the 10.5" you can simply add the queries for these dimensions:
#media only screen and (max-width: 900px),
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
// insert mobile and iPad Pro 12.9" CSS here
}

For those who want to target an iPad Pro 11" the device-width is 834px, device-height is 1194px and the device-pixel-ratio is 2. Source: screen.width, screen.height and devicePixelRatio reported by Safari on iOS Simulator.
Exact media query for portrait: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)

iPad Pro 12th Gen - 2022, I have tried, and it worked.
Portrait:
#media only screen and (width: 1024px) and (height: 1292px) {}
Landscape:
#media only screen and (width: 1366px) and (height: 950px) {}

Resources