James James - 1 month ago 8
CSS Question

How can I 'page zoom' on mobile browser

There are two types of zoom. The 'pinch zoom' you get on mobile browsers where content disappears off the edges of the screen. And the 'page zoom' you get on desktop browsers, like when you do Ctrl +. After 'page zoom' the page is re-flowed, so with, a responsive layout you still see the whole page width.

How can I allow users to 'page zoom' on mobile devices?

I am thinking there could be a Zoom + and Zoom - button on the header bar of my site. I want this because I have a web app that the majority of users like, both on desktop and mobile browsers. But some less capable users find the site small and fiddly on some of their mobile devices. The ability to pinch zoom (which I have not disabled) is a help, but it means constant zooming in and out to navigate.

I have tried solutions involving CSS

transform: scale(...)
and HTML
<meta name="viewport" ...>
and altering these from JavaScript. But these all seem to have a 'pinch zoom' effect, not the page zoom I am after. Also transform: scale(...) causes problems with js based/pixelbased interaction types such as draggable which I use.

I have also looked at altering CSS font sizes from JavaScript. But this only works for text, not the images,
<div>
s etc..

Answer

Apologies for answering my own question, but after a lot of tinkering, I found a simple way that works on many web sites. It is not a perfect solution, but it seems better than the other answers, so I thought it was worth sharing:

function zoom(scale) {
    document.body.style.transform = "scale(" + scale + ")";
    document.body.style.transformOrigin = "top left";
    document.body.style.width = (100 / scale) + "%";
    document.body.style.height = (100 / scale) + "%";
};
zoom(1.25);

The trick is to scale up the body with a scale transform, but then reduce the height and width. Reducing the height and width causes it to re-flow and keep the transformed content on the screen.

I tested the above code by pasting it into the console of Chrome Firefox and IE on several popular websites. It seems to perfectly re-scale amazon.com and stackoverflow.com, but not gmail and not my own web app.

I suspect all the issues occur when JavaScript tries to measure pixel positions and use them to position elements.

Comments