Search code examples
javascripthtmlmobileviewport

JavaScript to set the initial Scale in <meta name="viewport"

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 .

Solution

  • 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