在方向更改时重新加载 Web 应用程序

Question

简单的问题。我尝试了不同的搜索词组。我最近尝试的是“在方向更改时重新加载网络应用”

我知道或非常怀疑之前有人在 Stackoverflow 上问过这个问题，但搜索结果没有回答我的简单问题。

1) 我有一个网站，当手机在横向视图中时，它在智能手机上呈现良好，直到...

2) 我将智能手机重新定位到“纵向”视图位置，手机处于正常位置，手机的长高度是垂直的

那么网页是不使用整个屏幕的。页面保持完全相同的高度，与手机在横向模式下“侧身”握持时的高度相同。我看到的是仅使用智能手机屏幕顶部 2/5 的页面。

当我手动重新加载页面时，网页会完全填满屏幕的整个高度。

我添加了这个，它没有任何改变：

  <meta name="viewport" content="height = [pixel_value | 'device-height'],
      width = [pixel_value | 'device-width']" />

我更喜欢强制页面重新加载或某事 ??当智能手机的方向发生变化时，在 javascript 中。

因为我知道当我将智能手机从横向旋转到纵向后重新加载页面时，我的网页将（并且只有这样）会使用智能手机屏幕的整个高度。

我只使用纯 JavaScript。

当智能手机的方向从横向更改为纵向时，如何在我的网络应用中重新加载我的网页？

Answer 1

这是一个您所追求的非常简单的解决方案，但是，

$( window ).resize(function() {
  window.location.reload();
});

是一种在用户改变方向时刷新页面的可靠方法。

你也可以使用

screen.addEventListener("orientationchange", function() {
  window.location.reload();
});

---

如果您希望您的网页具有响应性，通常您应该确保编写正确的 HTML/CSS 是这样的设置，而不是恢复到这种粗糙的解决方案