I need to change viewport content dynamically though JavaScript, Code is working as expected in android but not in iPhone,

Javascript code:

const viewport = document.querySelector("meta[name=viewport]");
const initialScale = (1 - Math.random()*0.0001);
viewport.setAttribute('content', 'width=device-width, initial-scale='+initialScale+', user-scalable=1');

Above code works fine when I add metatag as follows:

<meta name="viewport" content="width=device-width, initial-scale=2.0, minimum-scale=1.0, maximum-scale=4.0, user-scalable=1">

But same Javascript code is not working when I add metata as:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0, user-scalable=1">

Any help is much appreciated.