How to do automatic reload of page when viewed in

2019-09-20 17:20发布

站内问答 / JavaScript
847 2 4

I have a wordpress site and working on the responsiveness of the site currently. The site when viewed in landscape mode looks fine. But when it's orientation is change to portrait mode (vertical) the different widgets on the site break or get cut off to extreme right.

However after a page refresh in portrait (vertical) mode all widgets show up fine and the site in general renders correctly. Seems like the CSS/JS is not loading up or unable to detect the orientation change until a refresh is done.

Can't expect the users to reload to get the proper view in portrait mode. Is there a way to reload all CSS/JS or just do an automatic page refresh on orientation change ?

Came across a thread where some one suggested the following to add to <head> tag 

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

I'm a novice to Wordpress so don't know where and how to add this so that all pages take up this effect. Also not sure if the above would work or is there some thing else I could try.

Any suggestions are welcomed as I have no idea how to sort this problem out.

Many thanks in advance

2条回答
迷人小祖宗
2楼-- · 2019-09-20 17:22

Detect and reload:

<script>
window.onorientationchange = function() { location.reload() };
</script>
查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2019-09-20 17:33

NOTE: this question is a duplicate. I'm re-posting here the gist of my answer from the main question.

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

The code listens to the orientationchange event and forced a re-flow of the body element by hiding it and showing it 10 miliseconds later. It does not depend on any <meta> tags or media queries.

Answers that suggest adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> don't work. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.

Compare that to this page, where we use the hide/show body technique in production.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)