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 ) };
});

不幸的是，这总是返回“Mobile，285px”，无论大小“.site”是什么......它无助于将“.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 ) };
});

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

Here is a fiddle

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

使用jQuery确定视口大小

1 个答案: