3

I have a problem with a screen that has 3800x2400 resolution at 300% recommended. I have one screen at 1920x1080 (monitor 1) and the other as mentioned above (monitor 2), I'm working with rems and my code shows up perfect in monitor 1 but gets too big in monitor 2: all the sizes, margins, paddings are the same in px when I inspect the DOM, except that in monitor 2 it shows up too big and has scroll bars.

html { 
  font-size: 8px;

  @media (min-width: @screen-sm-min-width) { 
    font-size: 10px;
  }

}

@screen-sm-min-width = 768px

I use rems that calculates for mobile based on 8px, and for a tablet or larger calculates based on 10px.

monitor 1

enter image description here

monitor 2

enter image description here

In monitor 2, its too big and it needs a scrollbar. I inspect the DOM and all the sizes are ok in pxs, same as in monitor 1. Why is this showing up like this?

ale10ander
  • 942
  • 5
  • 22
  • 42
Luis Mauri
  • 171
  • 9

1 Answers1

1

This is an issue with DPI scaling. Chrome has had issues with this since version 54.

If you're running the Creator's update on Windows 10, you can fix this by going to your web browser's properties, selecting "Compatibility" and checking "Override high DPI scaling behavior".

enter image description here

ale10ander
  • 942
  • 5
  • 22
  • 42
  • That works, but I need something over de code, or some code to remove in a library because I can't control the settings of the users. I'm using just in case this lib: https://github.com/FezVrasta/bootstrap-material-design. – Luis Mauri Aug 09 '17 at 20:26
  • It looks like the official response (as linked above) has been "this is a developer issue" with no clarification on what devs can do to fix it. I don't know of a non-client-side solution that can be implemented. It's a big problem for anyone running Chrome on multiple monitors with different resolutions. – ale10ander Aug 09 '17 at 22:07