2

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.

user1946932
  • 474
  • 1
  • 16
  • 41

1 Answers1

1

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.

NO_GUI
  • 444
  • 8
  • 12
  • And there are no issues (e.g. flow wrap, font sizing etc) doing that on Android devices? – user1946932 Dec 09 '20 at 23:36
  • 1
    Actually after looking at the docs, it looks like it might work on android, but I'm not sure, I'll look for another option too. – NO_GUI Dec 10 '20 at 01:48
  • Yes thank you for your updated answer. I was aware of that too. I was wondering if people had encountered any issues with that in the wild on various Android devices. – user1946932 Dec 10 '20 at 22:11
  • 1
    Good question, the Mozilla docs say both methods should work fine on android chrome update 18 and up [link](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom). The docs also say scale works on android chrome update 18 and up too [link](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()) – NO_GUI Dec 11 '20 at 17:35
  • 1
    Whoops I meant Android Chrome version 18 just to clarify – NO_GUI Dec 11 '20 at 17:53