在Android设备方向改变时调整HTML元素大小

Question

我试图在Javascript中绑定一个事件，要么是orientationchange事件，要么是resize事件，以便于为我的Web应用程序更改一些元素的宽度/高度。在事件中，我使用window.innerHeight和window.innerWidth来获取窗口的当前高度和宽度。

这在iOS和桌面设备上效果很好，但在Android上似乎在改变window变量的值之前调用此事件。因此，当有人从纵向切换到横向时，我仍然得到纵向的值，因此无法正确调整大小。有人知道问题出在哪里，以及我该如何解决吗？

- Dan D.

Answer 1

我已经解决了这个问题。事实证明，调整大小事件可以正常工作，但方向更改事件不行。我测试了方向事件是否存在，如果可能的话就绑定到那里。我已经改变了我的代码，只使用调整大小事件，并实现了所需的效果。

我不确定这是否适用于我的代码，但对我来说解决了问题。

- Dan D.

Answer 2

我的调查显示，当您修改Web视图的默认用户代理时，这个Android webview bug（“orientationchange”在更改window.innerHeight Javascript值之前触发20-150ms）存在。虽然它们之间的关系我也不清楚。

但是，要解决您的问题，您可以执行以下操作之一：

1）从您的代码中删除以下用户代理修改

webView.getSettings().setUserAgentString("custom-user-agent");

2）使用“resize”事件而不是“orientationchange”事件

- Alex Neshmonin

Answer 3

这个可以使用CSS选择器来实现：

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

来源：http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

- seymar

---

不确定它们是否适用于Android，如果不适用，则Android浏览器很差。 - seymar

我无法使用媒体查询，因为高度和宽度取决于屏幕尺寸并且必须计算。在Android上有许多不同的屏幕尺寸。 - Dan D.

Answer 4

我可以确认，在Android 2.2和2.3中，“orientationchange”事件不像预期的那样工作。当你检查可用性时，它会显示出来，但是却没有触发。虽然在Android 1.6和2.1中它能够正常工作。最终，我和你一样，在所有Android版本中使用了“resize”事件。

- Ross

Answer 5

看一下使用JavaScript在浏览器中检测Android手机的旋转的问题和答案。它涵盖了一个跨平台检测方向变化的方法。
要跨平台获取视口和/或窗口的大小，请查看http://responsejs.com/或http://verge.airve.com/。

- Thaddeus Albers