在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

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

Answer 4

有这样的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 5

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