个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 05:56:28 24 4
gpt4 key购买 nike

以下是真实代码的缩短版本。我使用 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，这在两个平台上都完美运行。

关于ios - 为什么我的 PhoneGap 应用程序图形仅在 iOS 上损坏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55106078/

24 4 0
文章推荐： mysql - 需要用select查询从10 :00 PM(22:00) To 6:00 AM(06:00) in MySQL?开始查时间
文章推荐： java - 菜单栏中的菜单选项未显示
文章推荐： java - 如果我想使用 Maven，是否需要安装 ADT 插件？
文章推荐： ios - 这里 map 路线指示颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com