Question

Is it possible to have a JavaScript function before the

<meta name="viewport" content="width=device-width; initial-scale=1.0; ">

to set the scale figures , to target each mobile device width correctly ?
For example in the JavaScript we have

if (window.devicePixelRatio == 0.75)

we make the meta tag:

<meta name="viewport" content="width=device-width; initial-scale=1.4; ">

and

 if (window.devicePixelRatio == 1.5)

we make the meta tag:

<meta name="viewport" content="width=device-width; initial-scale= 0,75; ">

so the page when it loads , it zoom in or out, to perfectly fit the device width.

if that possible , would you please post an example .

Answer 1

Ok after a long research I found a way to solve this.
I didn’t find a way to control the scale through JavaScript but I found another practical way. I hope it would be useful for other coders.

let say you have a page width of 250px and you want to do an webview app for android. And your page is not responsive so you have a fixed width. also you have tried

< meta name=”viewport” content=”width=250″>

and it didn’t work out for you.

add .css to you page with this it and adjust the figures as you want too.

@media screen and (max-width: 320px) { 
html { zoom: 120%; } 
}

@media screen and (max-width: 400px) { 
html { zoom: 150%; } 
}

@media screen and (max-width: 800px) { 
html { zoom: 220%; } 
}

@media screen and (min-width: 801px) { 
html { zoom: 230%; } 
}

so the page with their elements zoomed nicely to fit the android device that opening your webview app.
most widths I came through android are 240 320 400 480 533 600 800
or you can work it out for each 50 or 100 you have a zoom value 250 300 350 400 .. and so on