Question

简单的问题。我尝试过不同的搜索短语。我最近尝试过的是＃34;在方向更改时重新加载网络应用程序＆＃34;

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

1）我有一个网站，当在横向视图中拿着手机时可以在智能手机上呈现正常，直到......

2）我将智能手机重新定位为一幅肖像＆＃39;查看位置，手机处于正常位置，手机的长高是垂直的

然后，使用整个屏幕，网页不。该页面与完全相同的高度保持与手持的横向＆＃39;在横向模式。我看到的是仅使用智能手机屏幕的前2/5页的页面。

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

我添加了这个并且它没有改变任何内容：

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

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

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

我只使用纯javascript。

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

Answer 1

这是一个非常简单的解决方案，但是，

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

是一种在用户更改方向时刷新页面的强大方法。

您也可以使用

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

一般情况下，如果您希望您的网页能够响应这些设置而不是恢复到这种原始解决方案，那么您应该确保编写正确的HTML / CSS