Reputation: 971
I am trying media-queries with jQuery but not work correctly.
if ((screen.width>=20) || (screen.width<300)){
width="190"; //Adjust the width of the image
height="170"; //Adjust the height of the image
}
if ((screen.width>=300) || (screen.width<350)){
width="240"; height="200";
}
if ((screen.width>=351) || (screen.width<400)){
width="280"; height="220";
}
if ((screen.width>=401) || (screen.width<599)){
width="320"; height="240";
}
if ((screen.width>=600) || (screen.width<757)){
width="440"; height="320";
}
if ((screen.width>=758) || (screen.width<899)){
width="320"; height="240";
}
The code is called when a plugin is loaded because a new content has been added. It's a single page application. The content is loaded without refresh the browser.
I need to use mediaqueries with jquery because width
and height
are variables of the plugin.
Any idea? Thanks
Upvotes: 0
Views: 123
Reputation: 2150
Is this you wanted?
if ((window.innerWidth>=20) || (window.innerWidth<300)){
width="190"; //Adjust the width of the image
height="170"; //Adjust the height of the image
}
if ((window.innerWidth>=300) || (window.innerWidth<350)){
width="240"; height="200";
}
if ((window.innerWidth>=351) || (window.innerWidth<400)){
width="280"; height="220";
}
if ((window.innerWidth>=401) || (window.innerWidth<599)){
width="320"; height="240";
}
if ((window.innerWidth>=600) || (window.innerWidth<757)){
width="440"; height="320";
}
if ((window.innerWidth>=758) || (window.innerWidth<899)){
width="320"; height="240";
}
Upvotes: 1