0

I have an iframe with a certain height and width. Based on the browser and OS zoom level, I want to change the dimensions of the iframe.

My question is: How do I detect the OS zoom. I do know how to get the browser level zoom based on the answer How to detect page zoom level in all modern browsers?, but as I change the OS zoom (on windows and MAC), the browser zoom returned is the same. So I want to compensate for the browser zoom, and that is the reason I am looking to find a way to determine the OS level zoom.

I am interested in a solution for Chrome and Safari for now. Thank you for your help.

Community
  • 1
  • 1
AshD
  • 1,066
  • 2
  • 13
  • 28
  • Why do you want to compensate for OS zoom? If the user has changed their zoom settings for their own reasons they probably expect your page to keep its own proportions, not undo (or exaggerate) their zoom setting. – nnnnnn Mar 03 '17 at 02:38
  • The iframe I have is fixed in height and width. When the user changes the zoom, I want to change the height and width of the iframe as well. – AshD Mar 03 '17 at 02:41
  • You probably should go with sizes in %, or CSS @media queries... AFAIK there's no standard way to detect the zoom in JavaScript and you can't rely on anything on that matter, as you've seen on the question you linked. Besides, changing the page on user zoom seems to be a pretty bad practice on the UX perspective. – Dinei Mar 03 '17 at 02:47

2 Answers2

1

Just use vw and vh CSS units to set size of the iframe.

kirilloid
  • 14,011
  • 6
  • 38
  • 52
1

You can get OS zoom level from window.devicePixelRatio

ixpl0
  • 748
  • 5
  • 15