为啥我的 PhoneGap 应用程序图形仅在 iOS 上损坏？
Posted
技术标签:
【中文标题】为啥我的 PhoneGap 应用程序图形仅在 iOS 上损坏？【英文标题】：Why is my PhoneGap app graphics corrupted only on iOS?为什么我的 PhoneGap 应用程序图形仅在 iOS 上损坏？ 【发布时间】：2019-03-11 16:12:43 【问题描述】：以下是真实代码的缩短版本。我使用 PhoneGap 来实现一种算法，该算法采用我的两种设计——一种用于纵向，一种用于横向——并根据需要在它们之间切换，包括自动缩放到特定屏幕的中心。它在 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;
【问题讨论】：
【参考方案1】：在玩了很多之后，我想我发现了问题：style.WebkitFilter和style.filter至少有一个导致ios WebView出现渲染问题。我切换到简单地更改图像的src，这在两个平台上都能完美运行。
【讨论】：
以上是关于为啥我的 PhoneGap 应用程序图形仅在 iOS 上损坏？的主要内容，如果未能解决你的问题，请参考以下文章
在 PhoneGap 应用程序中，MessgeUI.framework 仅在 iOS 设备中崩溃
为啥 WebSQL 不适用于使用 PhoneGap 制作的 iOS 应用程序？