I'm using media queries for my site and it works perfectly from web to mobile.
Now I want to use some styles exclusively Apples Retina MBP's (NOT iPad, iPhone, etc.).
But I can't get it to work, when I change the CSS, it changes only on all devices.
Does anyone know a bulletproof media query only for the Macbook Pros which he tested?
I use this Media queries:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
only screen and ( min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and ( min-resolution: 192dpi) and (min-device-width: 1025px),
only screen and ( min-resolution: 2dppx) and (min-device-width: 1025px) {
/* MacBook-Retina-specific stuff here */
}
Source: http://css-tricks.com/snippets/css/retina-display-media-query/
Media queries don't detect user agents/devices; they detect features (such as resolution & orientation). Try using javascript and applying a class to the body, and applying styles from there.
var retina = (window.retina || window.devicePixelRatio > 1);
if (retina) {
$('body').addClass('retina'); // for example
}
Then in your css
body.retina {
// styles
}
body.retina #element {
// styles
}
Source: http://hjzhao.blogspot.co.uk/2012/07/detect-retina-display-using-javascript.html
I would try with
#media screen and (min-height: (yourtargetdevicepixelsheight)px) and (min-width: (yourtargetdevicepixelswidth)px) {
you styles here
}
As it is Apples Retina MBP's I dont think many devices can have both conditions, you could also lock it adding
and (max-height: (yourtargetdevicepixelsheight+1)px ) and the same with 'width'
hope it helps
Related
I don't know where to find the Media query for this device, my client is using one plus x. He have some responsive issue,
OnePlus 6T Media Query
#media only screen and (-webkit-min-device-pixel-ratio: 2.625),
only screen and ( min--moz-device-pixel-ratio: 2.625),
only screen and ( -o-min-device-pixel-ratio: 2.625/1),
only screen and ( min-device-pixel-ratio: 2.625),
only screen and ( min-resolution: 402dpi),
only screen and ( min-resolution: 2.625dppx) {
//Your CSS here
}
Reference: https://vizdevices.yesviz.com/devices/oneplus-6t/
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
Code sample source: https://getbootstrap.com/docs/4.1/layout/overview/
What's the reason for using .98px? Cross-browser compatibility?
Related: What are the rules for CSS media query overlap?
There isn't a good way to make two px-based #media rules mutually exclusive with no gap without repeating the same media query twice and using the not keyword — which isn't very readable much less DRY — and the < and > syntax new to Media Queries 4 isn't widely supported yet. As you've seen in my answer to the linked question, a viewport that is (in this example) exactly 576px wide will match both max-width: 576px and min-width: 576px simultaneously, which can cause issues (some cascading some not) as properties from both rules will be applied. Most authors therefore choose to have min- and max- constraints with a difference of 1 pixel, or less if they're worried about high-resolution displays with non-integer pixel densities that don't scale every CSS pixel to full device pixels (e.g. 1.5).
Indeed, cross-browser compatibility is the reason: according to Bootstrap's source, 0.02px is used "rather than 0.01px to work around a current rounding bug in Safari. See https://bugs.webkit.org/show_bug.cgi?id=178261" (that, predictably, as of July 2018 still hasn't been fixed). Starting from line 31 of _breakpoints.scss:
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767.98px
#function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
#return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
}
I just came across a weird thing and was wondering if this is expected behaviour or indeed some sort of bug.
My intention is to write the following code but I narrowed down the issue (see below).
#media only screen
and (
(-webkit-min-device-pixel-ratio: 1.2), /* or */
(min-resolution: 120dpi)
) { ... }
This code works:
#media only screen
and (-webkit-min-device-pixel-ratio: 1.2) { ... }
adding extra outside parentheses (round brackets), this fails:
#media only screen
and ( (-webkit-min-device-pixel-ratio: 1.2) ) { ... }
The target platform is latest Chrome on Android 5.1, but I'm open to hear comments on other platforms too.
It depends on what behavior you need to approach. Whether you need and or or for those rules
If you want to apply both of rules for media query, you need to use and logical operator
#media only screen and (-webkit-min-device-pixel-ratio: 1.2)
and (min-resolution: 120dpi)
{ ... }
If you want to apply any one of the rules for media query, you need to use comma :
#media only screen and (-webkit-min-device-pixel-ratio: 1.2),
only screen and (min-resolution: 120dpi)
{ ... }
I am working on a future proof fluid website and dont agree with the following:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) ,
only screen and ( min--moz-device-pixel-ratio: 2) ,
only screen and ( -o-min-device-pixel-ratio: 2/1) ,
only screen and ( min-device-pixel-ratio: 2) ,
only screen and ( min-resolution: 192dpi) ,
only screen and ( min-resolution: 2dppx) {
}
The world is not only retina or devices with 1, 1.5 or 2 pixel ratio. We will keep on having more numbers in the future. My question is: how do I target all those resolutions and future resolutions?
My problem is I have SVG versions of my PNG (PNG to support older browsers and devices with pixel ratio 1) for high resolution displays with I want to come into effect when the user has "any" high resolution display like the retina. So in order to spare all the tons of media queries and have it all future proof I prefer to write it once only. Like a master media query for all high resolution screens, be it mac retina, iphone, dell, HP, etc, nexus phone, etc.
Also why only min-resolution: 192dpi or 2dppx? I mean what about pixel density 1.5 144dpi ? isnt it better to set the minimum to lets say 100dpi (standard is 96) and everything above the normal will use my SVG. 100dpi, 101, 102......144dpi......192.......300dpi........900dpi.......1000 dpi and so on.
/* 1.25 dpr */
#media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}
/* 1.3 dpr */
#media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}
/* 1.5 dpr */
#media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}
/* 2 dpr */
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
/* Retina-specific stuff here */
}
Is there any way to focus on those two screens with media queries.
Here's my code for the Q10 but it doesn't work:
#media all and (max-height: 720px) and (max-width: 720px) and (min-resolution: 330dpi) {}
Any thought?
Thanks in advance
For the Q10, I would use this: #media screen and(device-height:720px)and(device-width:720px)
I used to select bb q10 in this way:
#media screen and (device-height: 347px) and (device-width: 347px)
and (-webkit-device-pixel-ratio:2.075)
{
}
Don't ask me why such weird values, works for me with BBOS 10.2.1.3062
Blackberry Q10 has a peculiar display. If you can't get it to look good in the range of your other media queries, try setting your specifications for Q10 at the end of your stylesheet, like:
#media screen and (device-width: 347px){
}