CODEWITHSUNDEEP
cordovawebviewfontsfont-sizephonegap
Free Bud
Free Bud

Reputation: 766

How to control font size exactly in PhoneGap / WebView, overriding possible settings?

I use PhoneGap/Cordova for developing a small app on a WebView. In order to control the exact design, I adjust in runtime (in JavaScript) the original sizes into new sizes, based on the actual screen width and height. Font sizes go through the same process. It generally works great, except for some cases where phone settings were used to change the default font size (see screenshot below).

Is there a way to override the system font size settings and still control exactly my font sizes? Here is a fragment of the code demonstrating the method. Note the font size manipulation:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/index.js"></script>
    ...
  </head>
  <body>
    <div id="all" class="all">
      <div id="main" class="main">
        <div id="ext" class="extCls">
          <div id="tabDiv1" class="tabDiv1Cls">
            <img id="tabImg1" class="tabImg" src="img/tabImgOnCls.png" draggable="false" />
            <div id="tabTxt1" class="tabTxt">&nbsp;&nbsp;Prove</div>
          </div>
          <div id="tabDiv2" class="tabDiv2Cls">
            <img id="tabImg2" class="tabImg" src="img/tabImgCls.png" draggable="false" />
            <div id="tabTxt2" class="tabTxt">&nbsp;&nbsp;Read</div>
          </div>
          ...
        </div>
      </div>
    </div>
  </body>
</html>

body {margin:0; border:0; padding:0; background-color:#c9c9c9; font-family:Calibri,Arial; font-size:14px; color:#0070b8; overflow:auto;}
.all {display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; border:0; padding:0; z-index:2;}
.main {display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; border:0; padding:0; background-color:#c9c9c9; overflow:hidden; z-index:10;}
.extCls {display:block; position:absolute; top:3.409%; left:4.444%; width:90%; height:93.344%; margin:0; border:2px solid; border-radius:6px; padding:0; background-color:#f4f4f4; border-color:#bcbcbc; z-index:20;}
.tabDiv1Cls, .tabDiv2Cls {display:block; position:absolute; top:-1.913%; width:21.605%; height:7.304%; margin:0; border:0; padding:0; font-size:2.922%; overflow:hidden; cursor:pointer; z-index:30;}
.tabDiv1Cls {left:8.642%;}
.tabDiv2Cls {left:31.481%;}
.tabImg {display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; border:0; padding:0; cursor:pointer; z-index:40;}
.tabTxt {display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; border:0; padding:0; line-height:233%; color:#ffffff; text-align:center; cursor:pointer; z-index:50;}
...

(function() {
  window.onload = function() {
    document.addEventListener("deviceready", start);
  }
}());
function start() {
  var MYWID = 360, MYHIG = 616;  // the original design
  var scrWid,scrHig,wid,hig,lef;
  scrWid = window.innerWidth; scrHig = window.innerHeight;
  if (scrWid/scrHig <= MYWID/MYHIG) { wid = scrWid; hig = Math.floor(MYHIG * scrWid / MYWID); lef = 0;}
  else { wid = Math.floor(MYWID * scrHig / MYHIG); hig = scrHig; lef = Math.floor((scrWid - wid) / 2);}
  document.getElementById("main").style.width = wid + "px";
  document.getElementById("main").style.height = hig + "px";
  document.getElementById("main").style.top = "0";
  document.getElementById("main").style.bottom = "auto";
  document.getElementById("main").style.left = lef + "px";
  document.getElementById("main").style.fontSize = hig + "px";
}

Upvotes: 1

Views: 704

Answers (1)

MStoner
MStoner

Reputation: 750

You need to override system accessibility settings using:phonegap-mobile-accessibility

Add the plugin and then in onDeviceReady() add the following:

if (window.MobileAccessibility) {
    window.MobileAccessibility.usePreferredTextZoom(false);
}

Upvotes: 1

Related Questions