使用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）”或“ .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 ) };
});

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

这是一个小提琴

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