Htykuut

I recently switched from using pixel values to using rem to size my objects on my site. My old format was like this:

.some-class{

  @media (max-width: $split-dimension) {

    width:10px;

  }

  @media (min-width: $split-dimension) {

    width:15px;

  }

}

I am trying to dynamically scale object using rem by setting the base rem in the scss file. I have set a dimension to split on - basically telling it that if the window is larger than a set size, show one size site, and if it's smaller, show the other. Here is that code:

$split-dimension: 1800px;



:root {

  @media (max-width: $split-dimension) {

    font-size: 41.666%;

  }

  @media (min-width: $split-dimension) {

    font-size: 62.5%;

  }

  body {

    font-size: 1.6rem;

  }

}



.some-class{

  width: 1.5rem;

}

Before making the switch, I noticed that on Macbooks that it would show the smaller scaled version of the site even on high resolution screens (I tested it on a 2018 Macbook), but it would still appear the same as the larger-scaled version does on a Windows machine (I inspected the objects and saw they were using the smaller pixel value on the Macbook, and the expected pixel values on Window). Changing the css of the smaller split dimension would affect the fullscreen Macbook page, but not the fullscreen Windows page.

Since changing to setting the rem and using one rem value for both sizes, it works properly on windows, but now it's displaying the correct sized objects on Macbook but the site looks zoomed in (something that has 1900px width would extend far beyond the border of the browser window even though the window is bigger than 1920px).

It seems that it's properly detecting that the Macbook browser window is larger than the split dimension now, but the objects are still being scaled up for some reason. I've tried this across multiple Macbooks and they all have the same problem.

I can't find anything explaining this zoom problem with Macbooks. Is there something I can do to circumvent this problem?

I found that by changing

:root {

  @media (max-width: $split-dimension) {

    font-size: 41.666%;

  }

  @media (min-width: $split-dimension) {

    font-size: 62.5%;

  }

  body {

    font-size: 1.6rem;

  }

}

to

:root {

  @media (max-width: $split-dimension) {

    font-size: 6.66px;

  }

  @media (min-width: $split-dimension) {

    font-size: 10px;

  }

  body {

    font-size: 1.6rem;

  }

}

I got the desired result.