视口分辨率自行更改

时间:2015-11-12 12:33:07

标签: javascript css height width viewport

以下代码(从更大的代码片段中提取)用于每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>

1 个答案:

答案 0 :(得分:0)

在回复上面的评论后,我意识到发生了什么......在我增加了主要&#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>

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