CODEWITHSUNDEEP
javascriptandroidcordovaviewport
Lucas Lobosque
Lucas Lobosque

Reputation: 399

Dynamic viewport resizing - Phonegap ignores viewport

I'm using the following code to "resize my app to the screen size of the device showing it:

$(function() {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
    var mw = 600; // min width of site
    var ratio =  ww / mw; //calculate ratio
      if( ww < mw){ //smaller than minimum size
      $('#vp').attr('content', 'initial-scale=' + ratio + '; maximum-scale=' + ratio + '; minimum-scale=' + ratio + '; user-scalable=yes; width=' + mw);
    }else{ //regular size
     $('#vp').attr('content', 'width=device-width; initial-scale=1.0');
    }
  }
});

I have a Nexus 4. If I open the website using chrome, it works just fine. However, if I use phonegap, it just ignores the viewport meta tag. (The script is working, the resulting content of the meta tag is the same as when using the browser). I see that there are a LOT of question regarding phonegap ignoring the viewport meta tag, but few of them offer any approach to solve this.

Upvotes: 0

Views: 2337

Answers (1)

Tamura
Tamura

Reputation: 1798

PhoneGap uses Android WebView before KitKat (4.4), and Android WebView does not support viewport with specific width. A solution to it is to use a library that enables custom viewport support.

One choice is monaca.viewport.js which is distributed in GitHub: https://github.com/monaca/monaca.js, and here is the API reference.

This library is also a part of Monaca, a free cloud-based tool for PhoneGap development.

Upvotes: 1

Related Questions