-1

我有一个 wordpress 网站，目前正在研究该网站的响应能力。以横向模式查看时，该站点看起来不错。但是，当它的方向更改为纵向模式（垂直）时，站点上的不同小部件会中断或被截断到极右端。

但是，在纵向（垂直）模式下刷新页面后，所有小部件都可以正常显示，并且站点通常可以正确呈现。似乎 CSS/JS 没有加载或在刷新完成之前无法检测到方向变化。

不能指望用户重新加载以在纵向模式下获得正确的视图。有没有办法重新加载所有 CSS/JS 或者只是在方向更改时自动刷新页面？

遇到一个线程，有人建议将以下内容添加到<head>标签

 <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

我是 Wordpress 的新手，所以不知道在哪里以及如何添加它，以便所有页面都采用这种效果。也不确定上述是否可行，或者还有其他我可以尝试的方法。

欢迎任何建议，因为我不知道如何解决这个问题。

提前谢谢了

4

2 回答 2

2

注意：这个问题是重复的。我在这里重新发布我对主要问题的回答的要点。

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

代码监听orientationchange事件body并通过隐藏它并在10毫秒后显示它来强制重新流动元素。它不依赖于任何<meta>标签或媒体查询。

建议添加的答案<meta name="viewport" content="width=device-width, initial-scale=1.0">不起作用。这是一个演示。为确保您了解它是如何工作的，请从 iPad 以横向模式开始，加载页面，然后旋转。请注意，尽管一直使用 flexbox，但页面并没有展开到全高。

将其与此页面进行比较，我们在生产中使用隐藏/显示主体技术。

于 2015-07-11T12:51:10.127 回答
1

检测并重新加载：

<script>
window.onorientationchange = function() { location.reload() };
</script>
于 2013-10-05T09:42:45.927 回答