视口分辨率自行改变

Question

以下代码（摘自一段更大的代码）旨在每 500 毫秒跟踪移动方向（纵向与横向），并保持 'main' 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

回复上面的评论后，我意识到发生了什么......在横向模式下增加 'main' div 的宽度后，当我旋转设备时，已经存在的wide div 会导致视口对其进行调整。我的解决方法：暂时减小 'main' 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>

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

视口分辨率自行改变

Viewport resolution changes by itself

javascript

css

height

viewport

width