Question

我为Q＆amp; 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代码都是here以节省SO空间。

我不确定为什么它会这样做。是我的CSS还是HTML结构？!!!
此外，我发现<section class="bottom row">....</section填充了下半部分，直到窗口结束，但它的大小超出了可见窗口（条款和条件部分未显示）。

我不知道更好的html结构是否能解决这个JS问题！

我感谢你的帮助！

感谢。

更新

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

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

当用户点击“开始测试”时，<div class="section">...应设为顶部动画，<div id="section-1">..将替换它。

之后，当用户点击＆＃39; TRUE＆＃39;或者＆＃39; FALSE＆＃39;窗口应设置为右侧部分的动画，以查看<class class="answer">部分以获取更多详细信息。它有一个＆＃39; NEXT＆＃39;按钮。当用户点击它时，窗口应该动画显示新的部分＆＃39; ....＆＃39;。

等等。这是整个想法。希望这能解释每个部分的流程。

感谢。

Answer 1

首先删除您使用过的不必要的分号

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

Answer 2

    <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>

当您调整窗口大小时，它将为您提供当前屏幕宽度和高度。尝试

窗口调整大小不起作用

2 个答案: