Strange Media Query issue

[afridy]

Hi guys,
strange, why this css code is firing even though it did not meet the conditions?

• The below code is a screen shot of chrome inspect.
  

[Archibald]

It works on the browser’s width (in CSS pixels), not the screen width (“resolution”)…

[afridy]

Thank you for the reply. i just adjusted the code to like this. but still this piece is not firing

@media screen and (min-device-width: 1920px) and (max-device-width: 2047px) and (-webkit-device-pixel-ratio: 1.25){

[PaulOB]

@afridy

Thank you for the reply. i just adjusted the code to like this. but still this piece is not firing

Min-device-width and max-device-width are deprecated and should not be used.

device-width - CSS: Cascading Style Sheets | MDN

I’ve no idea what device is between 1920 and 2040px wide anyway. That would be some sort of very large tablet!

[afridy]

This is my desktop computer mate. cant i use my own break points? oops.

Thank for the link. i am chking it.

[PaulOB]

@afridy

This is my desktop computer mate.

If that was aimed at me then once again I must refer you to my previous answer. The device-width media query is the physical width of the device not its resolution. That’s why it was deprecated. Use min-width and max-width media queries instead (which you were doing in the first post).

Perhaps it would help if you could explain why you think you need a media query at that point or what problem you are trying to solve and we can offer more pertinent answers.

[afridy]

sure, now this is the adjusted code to target 1920x1200 at windows 10 scale 1.25 (125%)

@media only screen and (min-width:1920px) and (max-width:2048px) and (-webkit-min-device-pixel-ratio: 1.25) {	
.wd-slide-bg{
display:none !important;	
}	

but still no luck. what i am tyring to do is, trying handle the view when windows scale feature is applied in users computer and scale level is at 125%

[m_hutley]

@afridy

-webkit-min-device-pixel-ratio

Where’d you get this from?
It’s a non-standard CSS marker. Are you sure your browser is interpreting it correctly?

For example, my display scaling is set to 100%, but Chrome says my devicePixelRatio is 1.100000023841858 on my 2560x1440 monitor, and 1.6500000953674316 on my 4K monitor.

[PaulOB]

@afridy

@media only screen and (min-width:1920px) and (max-width:2048px) and (-webkit-min-device-pixel-ratio: 1.25) {	
.wd-slide-bg{
display:none !important;	
}
}	

Its working for me (with the extra bracket at the end but I guess that was just a typo).

The problem is that your 1920 will be 25% less when you scale the windows settings to 1.25 so you would need to target a different range almost 500px smaller than you think.

@media only screen and (min-width: 1220px) and (max-width: 2048px) and (-webkit-min-device-pixel-ratio: 1.25) {
  body {
    background: red;
  }
}

It still seems a very strange thing to do but the code will work if your browser is within the parameters that you said and adjusted by the scaling factor you enter in the windows settings.

@afridy

what i am tyring to do is, trying handle the view when windows scale feature is applied in users computer and scale level is at 125%

You don’t need to do anything if you have built the site responsively. Your users will more or less get the same as someone who had a 1500px (approx) width screen. If you open and close your browser window slowly your design needs to adapt all across the range. In that way you cater for everyone automatically.

[afridy]

@PaulOB

The problem is that your 1920 will be 25% less when you scale the windows settings to 1.25 so you would need to target a different range almost 500px smaller than you think.

Thanks, i understand now !!!