Я использую PhoneGap / Cordova для разработки небольшого приложения в WebView. Чтобы контролировать дизайн точный , я настраиваю во время выполнения (в JavaScript) исходные размеры на новые размеры, основываясь на фактической ширине и высоте экрана. Размер шрифта go через тот же процесс. Как правило, он отлично работает, за исключением для некоторых случаев, когда для изменения размера шрифта по умолчанию использовались настройки телефона (см. Скриншот ниже).
Есть ли способ переопределить системные размеры шрифта и все еще контролируют точно мои размеры шрифта? Вот фрагмент кода, демонстрирующий метод. Обратите внимание на размер шрифта:
<!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"> Prove</div>
</div>
<div id="tabDiv2" class="tabDiv2Cls">
<img id="tabImg2" class="tabImg" src="img/tabImgCls.png" draggable="false" />
<div id="tabTxt2" class="tabTxt"> 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";
}
