Search code examples
androidhtmlcssiosandroid-chrome

Website-specific page zoom on Android Chrome?

On iOS Safari, there's a Aa button to resize text/page zoom on any specific website (including one we have been working on).

I couldn't find a similar function on Android Chrome aside from a global text size adjuster under Settings. That affects all websites.

We'd like a user to have the ability to zoom our specific website 115% and 125% if they want to.

I've looked into:

html 
{
   zoom:115%;
}

or

<meta name="viewport" content="width=86.9565217391304vw, initial-scale=1.15,
 user-scalable=no, maximum-scale=1.15, viewport-fit=cover">

Can anyone recommend what would be best practice for zooming a specific website on Android Chrome?

I may simply advise iOS Safari users to use the Aa button but may want to programmatically set something for Android Chrome users—based on a "Preferences" webpage for them on our website.

Solution

  • You can use document.body.style.zoom="90%" with any percentage you want. You can also use document.body.style.transform = scale(2); which is trickier to make the zoom look nice, but has much better browser support. You can use document.body.style.transform = "translate(0, 0)"; after a transform = scale() to center the page.