0

I have written the following media query that is not behaving as expected. The change is occurring at 1537px not 1024px. I am using a Retina screen and this code is contained within a SCSS file in a project bootstrapped with create-react-app 3.

I've done some research and found that my device pixel ratio is 3. Would that effect how I'll need to write my media queries?

My CSS:

&--info-container {

  border: 5px solid red;

  @media (max-width: 1024px) {
    border: 5px solid green; 
  }

}

In my index.html:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Thanks very much!!

danhemerlein
  • 73
  • 6

2 Answers2

0

Are you trying to target iPads? Device pixels and CSS pixels are different.

Here are two articles that explain that in more detail: https://medium.com/@flik185/understanding-device-resolution-for-web-design-and-development-3bb4a5183478 https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Here's a quick reference that you might find useful: http://iosres.com/

Kravimir
  • 691
  • 1
  • 6
  • 7
0

Turns out my browser was zoomed into 150%. Didn't think to check that!! Zooming out to 100% fixed this issue for me.

danhemerlein
  • 73
  • 6
  • Sounds like what I just experienced, on windows 10 retina screen, it defaults to 150% scaling which messes up a lot of websites – Huangism Sep 21 '22 at 13:11