Question

我正在寻找根据用户屏幕/窗口大小创建一个分为几个不同部分的网页。例如，当网页首次加载时，屏幕应显示第一部分（黑色背景）。如果用户向下滚动页面，它将进入pageTwo。但是，如果用户点击第一页上的任何位置（黑色背景），则会将它们带到pageTwo，仅显示蓝色背景。

无论如何我可以检测用户的屏幕大小（使用jQuery）来设置div标签pageOne的大小？如果用户点击第一页设置第二页的屏幕尺寸，那么又一次吗？

我有以下css＆amp; HTML代码。

CSS代码

体{高度：100％;}

#pageOne{
background:black; height: ?
}

#pageTwo{
background:blue; height: ?
}

HTML代码

<div id="pageOne"></div>
<div id="pageTwo"></div>

jQUERY Code

$(document).ready(function () {    
$('#pageOne').css({ 'height': (($(window).height()) - 62) + 'px' });

$(window).resize(function () {
    $('#pageOne').css({ 'height': (($(window).height()) - 62) + 'px' });
});

$('#pageTwo').css({ 'height': (($(window).height()) - 162) + 'px' });

$(window).resize(function () {
    $('#pageTwo').css({ 'height': (($(window).height()) - 162) + 'px' });
});

$('#pageOne').click(function () {
    $('html, body').animate({ scrollTop: $(document).height() }, 1500);
    return false;
});
})

Answer 1

您可以使用以下方法检测屏幕尺寸：

  $(window).height(); // height
  $(window).width(); // width

还要检测用户何时调整浏览器大小：

$(window).resize(function() {
    // Resize Elements
});

Answer 2

可以使用jquery函数

完成

//返回浏览器视口的高度

$( window ).height();

//返回HTML文档的高度

$( document ).height();

//返回浏览器视口的宽度

$( window ).width();

//返回HTML文档的宽度

$( document ).width();

调查这些jquery api（s）， Height api Width api

Answer 3

要添加Mathius的代码，您还需要将div高度设置为等于窗口高度。以下是我将如何实现它。假设以下内容 - 您有jQuery，页面具有类名.page，以下所有代码都包含在$(function(){});

中

function func(){     //can be named whatever you wish
    winheight = $(window).height();      //getting the height of the window
    $('.page').height(winheight);        //setting the div height to equal winheight
}

func();    //calling the above function when the page loads

$(window).resize(function() {
    func();    //calling the function when the page is resized
});

//you can call func(); whenever you need to make sure the page height matches 
//browser window height - but calling the function on document load and window
//resize should cover everything.

您无需担心设置任何宽度 - 只需将CSS样式设置为width: 100%即可正常工作。无论出于何种原因，CSS使用几乎所有百分比的宽度，因此height: 100%将在修改浏览器宽度时缩放，而不是高度。

（PS未经测试的代码，如果我犯了错误，请告诉我）

html中的屏幕页面

3 个答案: