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

Question

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

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

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

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

然后网页不使用整个屏幕。页面保持完全相同的高度，因为它在横向模式下手机“横向”放置时。我看到的是仅使用智能手机屏幕顶部 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