Schlagwort: content

Set viewport content with JavaScript and HTML5

In modern mobile devices and HTML5 browsers you can set the viewport content (for example the webpage zoom and webpage dimension) with a single meta tag:

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

If you want to do this with JavaScript, then you need a viewport meta-tag with empty content:

<meta name="viewport" content="" />

Then you can change the content by using JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function setViewPort(viewPortContent){
  var metas = document.getElementsByTagName('meta');
  var i;
  if (navigator.userAgent.match(/iPhone/i)) {
    for (i=0; i<metas.length; i++) {
      if (metas[i].name == 'viewport') {
        metas[i].content = viewPortContent;
      }
    }
  }
}
 
var viewPortContent = 'width=device-width,initial-scale=2.0,minimum-scale=2.0,maximum-scale=2.0, user-scalable=no';
setViewPort(viewPortContent);