CODEWITHSUNDEEP
javascripthtmlmobileviewport
lotav
lotav

Reputation: 337

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 .

Upvotes: 0

Views: 5004

Answers (3)

Xeoncross
Xeoncross

Reputation: 57234

If the element does not exist, you can create it with vanilla JavaScript

var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, initial-scale=1');
document.head.appendChild(meta);

Upvotes: 0

Istvan Betuker
Istvan Betuker

Reputation: 11

The following jQuery function did it for me:

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, user-scalable=no, initial-scale='+(1/window.devicePixelRatio)+'');

Upvotes: 1

lotav
lotav

Reputation: 337

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

Upvotes: 1

Related Questions