I found the following internal CSS on Reddit's homepage:
#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) {
._container_1hp4b_42 {
background-image: url(https://www.redditstatic.com/crypto-assets/v2/marketplace/web/in_feed_unit/bg_2x.png);
}
}
VSCode seems to think the backlashes are an error. Do they work as an OR operator?
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/
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 asked a similar question yesterday, but this one is now more precise to what I need. I have the following media query
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (-webkit-min-device-pixel-ratio : 3){
}
So that media query is for iphone 6 +. I am not trying to do a media query for anything which is not an IPhone 6 +, so I am trying to inverse the above (I have to do it like this - to long to explain). So I am trying
#media not screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (-webkit-min-device-pixel-ratio : 3){
}
But it does not seem to work. Is there any reason for this?
Thanks
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 */
}
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