在Android方向更改时调整HTML元素的大小

Question

我正在尝试将Javascript中的事件绑定到Android中的orientationchange或resize事件，以便更改我的Web应用程序的某些元素的宽度/高度。在这种情况下，我使用window.innerHeight和window.innerWidth来获取窗口的当前高度和宽度。

这在iOS和桌面设备上运行良好，但在Android上似乎在更改窗口变量中的值之前调用此事件。因此，当有人从纵向切换到横向时，我仍然会获得纵向值，因此无法正确调整大小。有谁知道问题是什么，以及我如何解决它？

Answer 1

我已经解决了这个问题。事实证明resize事件正常工作，但orientationchange事件没有。我正在测试是否存在orientationevent，然后在可能的情况下绑定到该。我已将代码更改为仅使用resize事件，并且已达到预期效果。

我不确定这是否是我的代码所特有的，但这就是为我修复的原因。

Answer 2

我的调查显示，当您修改Web视图的默认用户代理时，存在此Android webview错误（“orientationchange”在更改window.innerHeight Javascript值之前触发20-150ms）。不过，不要问我与另一个人有什么关系。

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

1）从你的代码中删除以下的useragent修改

webView.getSettings（）setUserAgentString（ “自定义用户代理”）;

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

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

Answer 4

我可以确认“orientationchange”-event在android 2.2和2.3中没有按预期工作。它说当你检查可用性时它会出现但是然后不会发射。它适用于Android 1.6和2.1。我和你一样，最后使用“resize”-event用于所有Android版本。

Answer 5

查看Detect rotation of Android phone in the browser with JavaScript的问题和答案。它涵盖了一个检测方向变化的跨平台 要获得视口和/或窗口跨平台的大小，请查看http://responsejs.com/或http://verge.airve.com/。