Question

以下是真实代码的缩短版本。我使用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;
  }
}

Answer 1

玩了很多之后，我认为我发现了问题：style.WebkitFilter和style.filter中的至少一个在iOS WebView中导致渲染问题。我改用了仅更改图片的src，并且在两个平台上都可以正常工作。

为什么我的PhoneGap应用程序图形仅在iOS上损坏？

1 个答案: