Определить размер видового экрана с помощью 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) }; 
}); 

Это, к сожалению, всегда возвращает "Mobile, 285px", независимо от того, что size ".site" is ... Это не помогает изменять «.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 

Это не поможет изменения «$ (окно)» на " $ ('. site') ".

Что я делаю неправильно?

(Для дальнейшего объяснения:.. Моя конечной цели изменения размера отрицательного запаса я даю в выключенный холсте навигацию, чтобы лучше соответствовать ширине экрана И да, я в простом начинающих вровень с JQuery)

Answer 1

Try это:

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

Примечание: В скрипке он будет получать ширину секции результата, так что будет производить меньшие результаты, чем ширина экрана. Увеличьте область результатов, чтобы увидеть изменение значения ширины.