5

I have a div with border-right property. When my site is zoomed out the div size will adapt but the border will still stay the same size. This results in the div moving outside its parent. Is there a way to detect the zoom level? So that I could change size depending on the zoom. And if so, then how?

Thanks in advance

Hwende
  • 599
  • 2
  • 10
  • 25
  • 2
    possible duplicate of [How to detect page zoom level in all modern browsers?](http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers) – Huangism Dec 05 '13 at 20:34
  • http://stackoverflow.com/questions/14870651/how-to-check-zoom-level-is-below-100-ctrl-and-in-each-browser this might help you as well – Huangism Dec 05 '13 at 20:34
  • There is a way to detect the zoom level, but it's harder than it sounds, and gets really complicated when trying to move elements based on zoom etc. – adeneo Dec 05 '13 at 20:34
  • 1
    The browser tries to optimize as best as it can. I wouldn't bother with this unless you have a specific reason for doing so. – Brad Dec 05 '13 at 20:35
  • Sounds to me like this issue should be adressed in CSS itself. – Ingo Bürk Dec 05 '13 at 20:37
  • How is the border-right defined, and what browser are you using? A quick test shows that the border width does shrink when zooming out on all browsers I tried. – Mr Lister Dec 05 '13 at 20:49
  • @Mr Lister I'm using border-right: 1px solid; And I've tried in both firefox and chrome. – Hwende Dec 05 '13 at 20:56
  • 1px you say? Yes, it is difficult to shrink below that. So, what do you get, rounding errors. – Mr Lister Dec 05 '13 at 20:59

2 Answers2

3
var zoom = window.outerWidth / window.document.documentElement.clientWidth
Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Saraf Talukder
  • 376
  • 2
  • 12
  • 3
    Doesn't work with FF; reports the same value for `window.outerWidth` and `window.document.documentElement.clientWidth` – P.M. Apr 18 '17 at 00:36
0

Since your border-width is 1px, you can't shrink below that, so what I would suggest is:

  • in the resize event, check if the browser has changed zoom using a method described here
  • set the border-width to 0px if the zoom level is under 100%
Community
  • 1
  • 1
Andrei
  • 3,086
  • 2
  • 19
  • 24