WebApp: how to get the zoom factor of the user browser?

Targets Web
1

I would like to get the zoom factor of the page the user is currently on
I found I could use the javascript window.devicePixelRatio;
but to get the result I have to use executejavascriptsync, and this does not exist in a webapp !?
how can I get this result in a webapp, from the main webpage ?
(without having to build a websdk …)
thanks.

2

On the web it would be extremely rare that you would need this information.

What are you actually trying to do?

3

some of my web pages are too big, I want to ask the user to decrease the zoom factor of the browser so that he can see the whole page correctly. I need this to display some webdialogs.
I can get the clientheight and width with the session, but it’s not enough to find the zoom factor

4

The most reliable thing I’ve found for zoom is seems to be window.visualViewport.scale (the originally mentioned property reads more like it’s the device pixel ratio – aka HiDPI screen information) Link to reference

I would recommend the WebSDK route for best results. I sat in on a webinar about some wild hack to avoid WebSDK, and the hack was more convoluted than the boilerplate you need for a WebSDK control.

Last thought is that you can disable pinch zoom. I don’t like to personally because I use it heavily myself. However, if your users aren’t able to understand that the reason the dialogs are off the screen because if zoom, there may be cause to simply disable it. Link to reference

1 Like
5

@Ricardo_Cruz , any “insider” view for this problem ? thanks.

6

I’m pretty sure that this is the “wild hack to avoid WebSDK” that @Tim_Parnell is referring to:
https://timdietrich.me/blog/xojo-web-code-injection/

I demonstrated it as part of a Xojo Hangout in December of 2022:

Anyway, I hope it helps.

1 Like
7

what do you think of something like this …

function setZoomToReachHeight(minimumHeight) {
    const currentHeight = document.body.clientHeight;
    const currentZoom = window.innerWidth / document.documentElement.clientWidth;
    
    if (currentHeight < minimumHeight) {
        const requiredZoom = currentZoom * (minimumHeight / currentHeight);
        document.body.style.zoom = requiredZoom;
    }
}

it could be used with a simple executejavascript …

or even

function setZoomToReachHeight(minimumHeight) {
    const currentHeight = document.body.clientHeight;
    const currentZoom = window.innerWidth / document.documentElement.clientWidth;
    
    if (currentHeight < minimumHeight) {
        if (confirm("Do you want to adjust the zoom level to see all page content better?")) {
            const requiredZoom = currentZoom * (minimumHeight / currentHeight);
            document.body.style.zoom = requiredZoom;
        }
    }
}