可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

Detect and reload:

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

回答2:

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.