在iPad纵向模式下查看时如何自动重新加载页面?

时间:2013-10-05 07:36:17

标签: javascript ios css wordpress ipad

我有一个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的新手,所以不知道在哪里以及如何添加这个以便所有页面都能起到这种效果。也不确定上述是否会起作用或是否还有其他一些我可以尝试的东西。

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

非常感谢提前

2 个答案:

答案 0 :(得分:1)

检测并重新加载:

<script>
window.onorientationchange = function() { location.reload() };
</script>

答案 1 :(得分:1)

注意:这个问题是重复的。我在这里重新发布了主要问题的答案要点。

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

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

建议添加<meta name="viewport" content="width=device-width, initial-scale=1.0">的答案不起作用。这是demo。要确保您了解它的工作原理,请从横向模式的iPad开始,加载页面,然后旋转。请注意,尽管一直使用flexbox,页面也不会扩展到全高。

将其与this page进行比较,我们在生产中使用hide / show body技术。