I have encountered an app for Android and iOS that has a subtle but extremely neat feature: regardless of the zoom level the size the grid borders remains constant before and after zoom. The cells scale themselves to take up a greater portion of the screen as the user zooms BUT the borders do not-- they remain a nice thin line. This is important for apps requiring fine control like drawing.
I naively tried to implement a similar grid for the web with html divs, css, and javascript. I expected the problem would be a simple matter of using one of the viewport sizing units (vh or vw). Unless I am doing something wrong this is not a valid solution. What happens instead is that the browser seems to measure how big the viewport is on zoom 100% and fixes the relative units on the basis of this. On zooming in you can be sure that those thin little lines are going to get bigger which makes achieving the goal of fine div interactions difficult and unattractive.
I would prefer to avoid re-implementing because the code I have written for my web app is already fairly far along and works fine minus the aforementioned issue. I am nevertheless open to any solutions involving libraries or standard web api features. Although even vector drawing libraries like paper.js do not obviously allow for this sort of thing. I have encountered other questions that might be related to this (How to detect page zoom level in all modern browsers?), but I am unsure of how to proceed. I have also seem similar questions regarding keeping a div of constant size. Even asking the question is difficult because a case could be made that the vh and vw units should behave in the way that I just outlined (viewport taking into account current zoom rather than just initial). And if they don't a yet further case could be made that CSS units should exist which do behave in that way.
So. In the end: can it be done? Can a webpage that does not use flash be made to implement the functionality that a phone app can with regard to a zooming user interface? I can include the code that generates the grid if anyone wants but it is largely irrelevant. It seems to all come down to the css surrounding the div borders which is a single line in the javascript which makes the grid. 0.1vw solid black or 1px solid black yield similar results.
Desired Before Zoom
Desired After Zoom
Actual Before Zoom
Actual Zoom After
