Question

我正在开发一个锁定在景观中的手机应用程序。目前的情况是，如果应用程序重新打开，而设备处于纵向状态，Android会打开应用程序，就像它是肖像一样（从而使网页的大小不正确 - 半渲染），然后释放错误，然后在重新调整之前将抖动调整到正确的方向渲染。

虽然这个问题不是永久性的，但这是非常不受欢迎的。

.closed {
  width: 640px;
  height: 360px;
  background: red;
  font-size: 18px;
  font-family: sans-serif;
}
.open {
  margin-top: 30px;
  width: 640px;
  height: 360px;
  background: red;
  font-size: 18px;
  font-family: sans-serif;
}
.app {
  width: 360px;
  height: 100%;
  background: green;
}
.open2 {
  margin-top: 30px;
  width: 640px;
  height: 360px;
  background: green;
  font-size: 18px;
  font-family: sans-serif;
}

<div class="closed">
  Phone in landscape, with device rotation locked so it shows apps and the like in portrait.
</div>

<div class="open">
  <div class="app">
    Once the app is opened it renders like this for around a second until the device catches up and performs the full rotation and repaint.
  </div>
</div>

<div class="open2">
  After the split second the device correctly rotates (the device does a rotation animation), then the app is correctly sized.
</div>

http://codepen.io/Jshthornton/pen/emzWYO

Answer 1

您可以尝试的一种可能性。

设备/模拟器轮播会触发window resize 事件。在这里，我想如果您尝试修复width & height（通过针对多个设备的css媒体查询），可能可以解决问题。

window.onresize = function(){    
     console.log("window.onresize::Height:"+ window.innerHeight + " Width:" + window.innerWidth); 
}

另外，还要收听简历事件并重新应用css查询。

var app = {
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        document.addEventListener('resume', this.onDeviceResume, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    onDeviceResume: function() {
         console.log("onDeviceResume....");
         var windowHeight = 0, windowWidth = 0;
         if (typeof (window.innerWidth) == 'number') {
             windowHeight = window.innerHeight;
             windowWidth = window.innerWidth;
          }
      console.log("Resume: Height:"+ window.innerHeight + " innerWidth:" + window.innerWidth); 
    } 
};

如果您注意到，目前width & height在resume上显示一个值，在resize调用后，它会应用更新的尺寸/值。所以我想这里可以做点什么。

Android Webview重绘方向更改时延迟（延迟）

1 个答案: