Fatal编程技术网
  • javascript/
  • Javascript 视口分辨率会自行更改

Javascript 视口分辨率会自行更改

javascript css

Javascript 视口分辨率会自行更改,javascript,css,height,width,viewport,Javascript,Css,Height,Width,Viewport,以下代码（从更大的代码中提取）旨在每隔500毫秒跟踪移动方向（纵向与横向），并保持“主”div，纵向比例为1:2，横向比例为2:1，占据屏幕的全宽（以及所需的高度） 我用的是三星Galaxy S5。我从纵向开始，然后旋转到横向，然后回到纵向，我得到了更高的分辨率 如果我从html中删除“main”div，而只保留“test”div，那么事情似乎会正常运行，即始终保持相同的纵向和横向分辨率 <html> <head> <meta name="viewport" con

以下代码（从更大的代码中提取）旨在每隔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>


var wid=0，hig=0，widPrev=0，higPrev=0；
函数start（）{
wid=window.innerWidth；hig=window.innerHeight；
if（（wid！=widprov）| |（hig！=higprov））{
document.getElementById（'test'）.innerHTML+='（'+wid+'，'+hig+'）；
widPrev=wid；higPrev=hig；
变量id；
id=document.getElementById（'main'）；if（id！=null）{
id.style.width=wid+'px'；

id.style.height=（（wid在回复上面的评论后，我意识到发生了什么…在横向模式下增加“main”div的宽度后，当我旋转设备时，已经存在的宽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>




var wid=0，hig=0，widPrev=0，higPrev=0；
函数start（）{
wid=window.innerWidth；hig=window.innerHeight；
if（（wid！=widprov）| |（hig！=higprov））{
document.getElementById（'main'）.style.width='0'；//临时
document.getElementById（'main'）。style.height='0'；//临时
wid=window.innerWidth；hig=window.innerHeight；
document.getElementById（'test'）.innerHTML+='（'+wid+'，'+hig+'）；
document.getElementById（'main'）.style.width=wid+'px'；

document.getElementById（'main'）。style.height=(（据我所知，您需要测试scrollWidth/scrollHeight以获得正确的值。
内部
值可能不准确。Google
MDN scrollWidth
。但我也可以看到视口分辨率突然变高，因为测试的字体变小了……看起来像已经存在的“main”div这不公平。