Question

以下代码（从更大的代码片段中提取）用于每500毫秒跟踪移动方向（纵向与横向），并维持一个“主”div，纵向比例为1：2，横向比例为2：1 ，占据屏幕的整个宽度（以及所需的高度）。

我正在使用三星Galaxy S5。我从肖像开始，然后我旋转到风景，然后回到肖像我得到更高分辨率!!!

如果我从html中删除'main'div，并且只留下'test'div，事情似乎表现正常，即一直都是相同的肖像和风景分辨率。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
var wid = 0, hig = 0, widPrev = 0, higPrev = 0;
function start() {
  wid = window.innerWidth; hig = window.innerHeight;
  if ((wid != widPrev) || (hig != higPrev)) {
    document.getElementById('test').innerHTML += '(' + wid + ',' + hig + ') ';
    widPrev = wid; higPrev = hig;
    var id;
    id = document.getElementById('main'); if (id != null) {
      id.style.width = wid + 'px';
      id.style.height = ((wid <= hig) ? 2*wid : wid/2) + 'px';
    }
  }
  setTimeout(start, 500);
}
</script>
</head>
  <body onload="start();">
    <div id="main">
      <div id="test"></div>
    </div>
  </body>
</html>

Answer 1

在回复上面的评论后，我意识到发生了什么......在我增加了主要＆＃39;之后的宽度。 div在横向模式下，当我旋转设备时，已存在的宽div会导致视口调整它。我的解决方法：暂时缩小＆＃39; main＆＃39; div，像这样：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
var wid = 0, hig = 0, widPrev = 0, higPrev = 0;
function start() {
  wid = window.innerWidth; hig = window.innerHeight;
  if ((wid != widPrev) || (hig != higPrev)) {
    document.getElementById('main').style.width = '0'; //temporary
    document.getElementById('main').style.height = '0'; //temporary
    wid = window.innerWidth; hig = window.innerHeight;
    document.getElementById('test').innerHTML += '(' + wid + ',' + hig + ') ';
    document.getElementById('main').style.width = wid + 'px';
    document.getElementById('main').style.height = ((wid <= hig) ? 2*wid : wid/2) + 'px';
    widPrev = wid; higPrev = hig;
  }
  setTimeout(start, 500);
}
</script>
</head>
  <body onload="start();">
    <div id="main">
      <div id="test"></div>
    </div>
  </body>
</html>

我很高兴听到我的猜测是否正确，以及此解决方案是否合适（以及所有新浏览器的跨浏览器）。

视口分辨率自行更改

1 个答案: