以下是实际代码的缩短版本。我使用PhoneGap来实现一个算法，该算法采用我的2个设计 - 一个用于纵向，一个用于横向 - 并根据需要在它们之间切换，包括自动缩放到特定屏幕的中心。它在Android上运行良好，但在模式（纵向/横向）和单击选项卡之间切换时，iPhone上的选项卡图形似乎有一些无法解释的损坏。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js"></script>
</head>
<body>
<div id="main" class="main">
<div id="ext" class="extPortrait">
<div id="tabDiv1" class="tabDiv1Portrait">
<img id="tabImg1" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt1" class="tabTxt">Tab1</div>
</div>
<div id="tabDiv2" class="tabDiv2Portrait">
<img id="tabImg2" class="tabImg" src="img/tabImgPortrait.png" draggable="false" />
<div id="tabTxt2" class="tabTxt">Tab2</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
CSS：
body {direction:ltr; margin:0; border:0; padding:0;
background-color:#c9c9c9; font-family:Calibri,Arial;
font-size:14px; color:#0070b8; overflow:auto;}
.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;}
.extPortrait, .extLandscape {display:block; position:absolute;
margin:0; border:2px solid; border-radius:6px; padding:0;
background-color:#f4f4f4; border-color:#bcbcbc; z-index:20;}
.extPortrait {top:3.409%; left:4.444%; width:90%; height:93.344%;}
.extLandscape {top:6.25%; left:2.5%; width:94.375%; height:87.798%;}
.tabDiv1Portrait, .tabDiv2Portrait, .tabDiv1Landscape, .tabDiv2Landscape
{display:block; position:absolute; margin:0; border:0; padding:0;
overflow:hidden; cursor:pointer; z-index:30;}
.tabDiv1Portrait, .tabDiv2Portrait
{top:-1.913%; width:21.605%; height:7.304%; font-size:2.922%;}
.tabDiv1Landscape, .tabDiv2Landscape
{top:-3.729%; width:23.179%; height:14.237%; font-size:5.357%;}
.tabDiv1Portrait {left:8.642%;}
.tabDiv2Portrait {left:31.481%;}
.tabDiv1Landscape {left:4.636%;}
.tabDiv2Landscape {left:28.477%;}
.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;}
JavaScript：
var PMYWID = 360, PMYHIG = 616; //sizes of my portrait design
var LMYWID = 640, LMYHIG = 336; //sizes of my landscape design
var scrWid = 0, scrHig = 0;
var portrait = true;
var tabNum = 0;
(function() {
window.onload = function() {
mobilePeriodicCheck();
tab1Clk();
document.getElementById("tabDiv1").addEventListener("click", tab1Clk);
document.getElementById("tabDiv2").addEventListener("click", tab2Clk);
//document.getElementById("main").style.display = "block";
}
}());
function mobilePeriodicCheck() {
var scrWidNew = window.innerWidth, scrHigNew = window.innerHeight;
if ((scrWidNew != scrWid) || (scrHigNew != scrHig)) {
scrWid = scrWidNew;
scrHig = scrHigNew;
portrait = (scrWid <= scrHig);
var wid,hig,lef;
if (portrait) {
if (scrWid/scrHig <= PMYWID/PMYHIG) { wid = scrWid; hig = Math.floor(PMYHIG*scrWid/PMYWID); lef = 0;}
else { wid = Math.floor(PMYWID*scrHig/PMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
else {
if (scrWid/scrHig <= LMYWID/LMYHIG) { wid = scrWid; hig = Math.floor(LMYHIG*scrWid/LMYWID); lef = 0;}
else { wid = Math.floor(LMYWID*scrHig/LMYHIG); hig = scrHig; lef = Math.floor((scrWid-wid)/2);}
}
var id = document.getElementById("main");
id.style.width = wid + "px";
id.style.height = hig + "px";
id.style.left = lef + "px";
id.style.fontSize = hig + "px";
document.getElementById("ext").className = portrait ? "extPortrait" : "extLandscape";
document.getElementById("tabDiv1").className = portrait ? "tabDiv1Portrait" : "tabDiv1Landscape";
document.getElementById("tabDiv2").className = portrait ? "tabDiv2Portrait" : "tabDiv2Landscape";
document.getElementById("tabImg1").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
document.getElementById("tabImg2").src = portrait ? "img/tabImgPortrait.png" : "img/tabImgLandscape.png";
}
setTimeout(mobilePeriodicCheck, 1000);
}
function tab1Clk() { tabClk(1); }
function tab2Clk() { tabClk(2); }
function tabClk(iTab) {
if (iTab!=tabNum) {
if (tabNum > 0) {
document.getElementById("tabImg"+tabNum).style.WebkitFilter = "brightness(100%)";
document.getElementById("tabImg"+tabNum).style.filter = "brightness(100%)";
}
document.getElementById("tabImg"+iTab).style.WebkitFilter = "brightness(135%)";
document.getElementById("tabImg"+iTab).style.filter = "brightness(135%)";
tabNum = iTab;
}
}
在玩了很多这个之后，我想我发现了问题：至少有一个style.WebkitFilter和style.filter导致iOS WebView中的渲染问题。我切换到简单地改变图像的src，这在两个平台上都能很好地工作。