如何在 PhoneGap / WebView 中准确控制字体大小，覆盖可能的设置？

Question

我使用 PhoneGap/Cordova 在 WebView 上开发一个小应用程序。为了控制精确设计，我在运行时（在 JavaScript 中）根据实际屏幕宽度和高度将原始尺寸调整为新尺寸。字体大小经历相同的过程。它通常效果很好，除了在某些情况下 phone 设置用于更改默认字体大小（见下面的屏幕截图）。

有没有办法覆盖系统字体大小设置并仍然完全控制我的字体大小？这是演示该方法的代码片段。注意字体大小操作：

<!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";
}

Answer 1

您需要使用以下方法覆盖系统辅助功能设置：phonegap-mobile-accessibility

添加插件，然后在 onDeviceReady() 中添加以下内容：

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

如何在 PhoneGap / WebView 中准确控制字体大小，覆盖可能的设置？

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

fonts

font-size

webview

cordova

phonegap