title: app renders differently on android than iOS using phonegap
body: <p>I have an app on the app store that renders the screens just right for all iPhones and iPads.
  <a href="http://i.stack.imgur.com/mMz8b.png" rel="nofollow">app page rendering on iOS iphone5</a></p>
  
  <p>However, Once I rebuilt the app in PGB for android and uploaded it to the Google Play store and it was published the screen now renders much smaller.
  <a href="http://i.stack.imgur.com/QysxJ.jpg" rel="nofollow">same app page rendering on Samsung Galaxy S5</a></p>
  
  <p>I looked at some other posts and some suggest looking at the viewport and changing the densitydpi while others say look at the CSS and some of the absolute positioning I have used. Just wondering if anyone can redirect me to why the iOS build looks like I want but the Android one is much smaller when they are using the same code in the www folder and all the same html, css, and js files. Is Android looking for something that is not there in the code I have or did iOS negate some code I had and Android is rendering that.</p>
  
  <p>Here is some of my code from the html and css pages</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1,     maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
  </code></pre>
  
  <p>and some of the css...</p>
  
  <pre><code>body {
  height: 100%;
  position: fixed;
  overflow-y: scroll;
  margin: 0px;
  padding: 0px;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  }
  
  h1 {
  font-weight: 300;  
  }
  
  .text {
  width: 30px;   
  margin-left: 20px;
  margin-right: 20px;
  border: none;
  font-size: 30px;
  }
  
  #equals {
  cursor: pointer;
  border: none;
  background-color: #ffffff;   
  font-size: 20px;
  border-style: solid;
  border-color: #007AFF;
  border-width: 2px;
  border-radius: 2px;
  outline: none;
  margin-top: 15px;
  font-size: 30px;
  }
  
  #waterTank {
  position: relative;
  top: -50px;
  z-index: 2;
  }
  
  #whiteCover {
  position: absolute;
  width: 100%;  
  height: 600px;
  background-color: #ffffff;
  top: 402px;
  z-index: 2;
  }
  </code></pre>
  
  <p>and some code from config.xml page
  on config.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;widget xmlns = "http://www.w3.org/ns/widgets"
  xmlns:gap = "http://phonegap.com/ns/1.0"
  id        = "our group"
  version   = "1.3"&gt;
  
  &lt;name&gt;Watertank Math&lt;/name&gt;
  
  &lt;description&gt;
  Teaching addition and subtraction of integers.
  &lt;/description&gt;
  
  &lt;author href="my webpage here" email="mine here"&gt;
  yours truely
  &lt;/author&gt;
  
  &lt;preference name="phonegap-version" value="cli-5.2.0" /&gt;
  &lt;preference name="orientation" value="portrait"/&gt; 
  
  &lt;plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" /&gt;
  &lt;allow-navigation href="*" /&gt;
  &lt;allow-intent href="*" /&gt;
  </code></pre>
  
  <p>When we were building the app we used the phonegap developer app and all the pages looked fine, none were smaller than others and both the iOS and Android devices we ran off the phonegap serve command using the terminal both looked equivalent.  The fact that the phonegap developer app looked the same on both iOS and Android help at all?</p>
  
  <p>And finally to throw one last kink in the armour...
  One other thing I will add is that I have other pages with less graphics where everything fits fine but when I go to other pages everything is shrunk.</p>
  
  <p>Sorry I can't link more than 2 items since my reputation is not up to 10 yet.</p>
  
  <p>But this is what my html looks like on this home page file (added CPS code)...</p>
  
  <pre><code>&lt;meta http-equiv="Content-Security-Policy"
  content="default-src *;
  style-src * 'self' 'unsafe-inline' 'unsafe-eval';
  script-src * 'self' 'unsafe-inline' 'unsafe-eval';"&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/index.css" /&gt;
  &lt;!-- START STYLE SHEET FOR MENU --&gt;   
  &lt;link type="text/css" rel="stylesheet" href="css/menu.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/Home.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="dist/css/jquery.mmenu.all.css" /&gt;
  </code></pre>
  
  <p>and some of the css from it...</p>
  
  <pre><code>body {
  font-family: 'Roboto';
  font-weight: 100; 
  }
  
  #logoText {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 200px;
  }
  
  #intro {
  width: 300px;
  opacity: 0;
  -webkit-animation: slideIn .75s 0s 1 forwards;
  -moz-animation: slideIn .75s 0s 1 forwards;
  -o-animation: slideIn .75s 0s 1 forwards;
  }
  
  #intro p {
  font-size: 35px;   
  color: #000000;   
  }
  
  @-webkit-keyframes slideIn {
  0% {
      padding-left: 500px;
  }
  100% {
      padding-left: 0px;
      opacity: 1;
  }
  }
  @-moz-keyframes slideIn {
  0% {
      padding-left: 500px;
  }
  100% {
      padding-left: 0px;
      opacity: 1;
  }
  }
  @-o-keyframes slideIn {
  0% {
      padding-left: 500px;
  }
  100% {
      padding-left: 0px;
      opacity: 1;
  }
  }
  
  .menu {
  margin-bottom: 5px;
  
  }
  
  .menu a {
  color: #000000;
  font-size: 30px;
  font-weight: 100;
  margin-top: 0px;
  margin-bottom: 0px;
  text-decoration: none;
  }
  
  #begin {
  margin-right: 300px;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  border-color: #000000;
  margin-top: 10px;
  width: 180px;
  opacity: 0;
  -webkit-animation: slideIn1 .5s .5s 1 forwards;
  -moz-animation: slideIn1 .5s .5s 1 forwards;
  -o-animation: slideIn1 .5s .5s 1 forwards;
  } 
  
  @-webkit-keyframes slideIn1 {
  0% {
      margin-right: 500px;
  }
  100% {
      margin-right: 0px;
      opacity: 1;
  }
  }
  @-moz-keyframes slideIn1 {
  0% {
      margin-right: 500px;
  }
  100% {
      margin-right: 0px;
      opacity: 1;
  }
  }
  @-o-keyframes slideIn1 {
  0% {
      margin-right: 500px;
  }
  100% {
      margin-right: 0px;
      opacity: 1;
  }
  }
  </code></pre>
  
  <p>Any particular reason why these pages seem to render the same from iOS to android and the others do not?  Should I remove all the</p>
  
  <pre><code>&lt;meta charset="utf-8" /&gt;
  &lt;meta name="format-detection" content="telephone=no" /&gt;
  &lt;meta name="msapplication-tap-highlight" content="yes" /&gt;
  &lt;meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
  </code></pre>
  
  <p>It seems on the html pages that render the same on iOS and Android they don't have any of this meta code at the top of the page while the ones that don't render the same all have this code.  Very puzzled on how to correct this rendering.</p>