Android Webview 重新绘制方向更改时的延迟(滞后)

Question

我正在开发一个锁定在横向的Phonegap应用程序。目前的情况是，如果在设备处于纵向状态时重新打开应用程序，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后，它会应用更新的大小/值。所以我想这里可以做点什么。