I am currently attempting to use jQuery to determine the size of the viewport, but I am not achieving the desired results.
Here is my CSS code:
.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;
}
I have attempted two different methods to determine the viewport size:
$(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 ) };
});
However, this consistently returns "Mobile, 285px" regardless of the actual ".site" size. Changing ".css("width")" to ".css(width)" or ".width()" did not resolve the issue either.
The second method I tried was:
$(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 ) };
});
Unfortunately, this always triggers an error in the console:
Uncaught ReferenceError: viewport is not defined
(anonymous function)
j
k.fireWith
n.extend.ready
I
Changing "$(window)" to "$('.site')" also did not help to fix the error.
I am seeking guidance on what could be the issue here.
(To provide further context: My main goal is to adjust the negative margin of an off-canvas navigation to better fit the screen width. Please note that I am relatively new to using jQuery.)