以下代码(从更大的代码片段中提取)用于每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>
答案 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>
我很高兴听到我的猜测是否正确,以及此解决方案是否合适(以及所有新浏览器的跨浏览器)。