窗口大小调整不起作用

Window resize is not working

本文关键字：不起作用 调整 窗口大小      更新时间：2023-09-26

我为Q& a测验做了一个标记。

当我尝试调整窗口大小时，我得到了无效的高度和宽度值。例如:在移动视图上，我得到了以下值height: 9428992px; width: 880px; !!!!?

下面是获取文档高度和宽度的方法: 
$.getDocHeight = function(){
 var D = document;
 return Math.max(
  Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
  Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
  Math.max(D.body.clientHeight, D.documentElement.clientHeight)
 );
};
$.getDocWidth = function(){
 var D = document;
 return Math.max(
  Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
  Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
  Math.max(D.body.clientWidth, D.documentElement.clientWidth)
 );
};

所有的html, css和jQuery代码都在这里节省空间。

我不确定它为什么会这样。是我的CSS还是HTML结构?!!
我还发现<section class="bottom row">....</section填充了底部的部分，直到窗口的末端，但它的大小超过了可见窗口(条款和条件部分未显示)。

我不知道如果更好的html结构会解决这个JS问题!

我很感激你的帮助!

谢谢。

这就是我想要完成的，也许我的结构或风格不正确。

用户希望打开页面并看到第一部分填满屏幕。红色部分填充顶部，然后蓝色填充"窗口/页面"的其余部分。因此，用户应该看到所有上下文从顶部图像开始，并以右下角的"条款和条件"结束。

当用户点击'START QUIZ'时，<div class="section">...应该动画到顶部，<div id="section-1">..将取代它。

之后，当用户点击'TRUE'或'FALSE'窗口应该动画到右边的部分，以查看<class class="answerswer">部分的更多细节。它有一个"下一步"按钮。当用户点击它的窗口应该动画显示一个新的部分'....'。

以此类推。这就是整个想法。希望这解释了每个部分的流程。

谢谢。

首先去掉不必要的分号

function sizeUpdate(){
        widnowHeight = $.getDocHeight();
        widnowWidth  = $.getDocWidth();
        $('#value').html(widnowHeight);
        $(".section").css("height", widnowHeight);
        $(".section").css("width", widnowWidth);
        if (selected_section == 2){
          $("#section-1").css("margin-top", widnowHeight*-1);
          $("#section-1").css("margin-left", widnowWidth*-1);
        };//Semicolon not required
        if (selected_section == 3) {
          $("#section-1").css("margin-top", widnowHeight*-1);
          $("#section-2").css("margin-top", widnowHeight*-1);
          $("#section-1").css("margin-left", widnowWidth*-1);
          $("#section-2").css("margin-left", widnowWidth*-1);
        };//Semicolon not required
        if (selected_section == 4) {
          $("#section-1").css("margin-top", widnowHeight*-1);
          $("#section-2").css("margin-top", widnowHeight*-1);
          $("#section-3").css("margin-top", widnowHeight*-1);
          $("#section-1").css("margin-left", widnowWidth*-1);
          $("#section-2").css("margin-left", widnowWidth*-1);
          $("#section-3").css("margin-left", widnowWidth*-1);
        };//Semicolon not required
      };//Semicolon not required

这里是代码检查一下是否正常http://jsbin.com/yesenutoki/1/edit?html,css,js

    <p>Try resizing this browser window to trigger the "resize" event handler.</p>
    <p id="demo"></p>
    <script>
        window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = window.innerWidth+"    "+window.innerHeight;;
    });
    </script>

当你调整窗口大小时，它会给你当前的屏幕宽度和高度。试试

相关文章：