使用 jQuery 确定视口大小

Question

我正在尝试通过 jQuery 确定视口大小。不幸的是，我没有得到我想要的结果。

首先是我的 CSS：

.site {
    max-width: 960px;
}

@media only screen and (min-width : 760px) and (max-width : 1040px)  /* tablet */{
.site {
    max-width: 620px;
}

@media only screen and (min-width : 240px) and (max-width : 759px) /* mobile */{
.site {
    max-width: 285px;
}

现在我一直在尝试确定视口大小的两种不同版本：

$(window).ready(function() {
    var viewport = $('.site').css("width");
});
$(function() {
    if ( viewport <= '285px' ) {
        console.log( "Mobile,", viewport ) ;}
    else if ( viewport <= '620px' ) {
        console.log( "Tablet,", viewport ) ;}
    else {
        console.log( "Desktop,", viewport ) };
});

不幸的是，无论“.site”是什么大小，这总是返回“Mobile，285px”......它无助于将“.css（“width”）”更改为“.css（width）”或“。宽度（）”。

我试过的第二个版本是：

$(window).ready(function() {
    var viewport = $(window).width();
});
$(function() {
    if ( viewport <= 759 ) {
        console.log( "Mobile,", viewport ) ;}
    else if ( viewport <= 1040 ) {
        console.log( "Tablet,", viewport ) ;}
    else {
        console.log( "Desktop,", viewport ) };
});

这将始终在控制台中返回错误：

Uncaught ReferenceError: viewport is not defined 
(anonymous function) 
j 
k.fireWith 
n.extend.ready 
I

将 "$(window)" 更改为 "$('.site')" 也无济于事。

我做错了什么？

（进一步解释：我的最终目标是调整我给画布外导航的负边距以更好地适应屏幕宽度。是的，我只是 jQuery 的初学者。）

Answer 1

试试这个：

$(window).ready(function() {
    var viewport = $(window).width();

    if ( viewport <= 759 ) {
        console.log( "Mobile,", viewport ) ;}
    else if ( viewport <= 1040 ) {
        console.log( "Tablet,", viewport ) ;}
    else {
        console.log( "Desktop,", viewport ) };
});

不需要第二个功能。您不妨在窗口就绪块中执行所有操作。

Here is a fiddle

注意：在小提琴中，它将获得结果部分的宽度，因此它会产生小于屏幕宽度的结果。使结果部分变宽以查看宽度值的变化。