Show content on screen size - html

Question

I am trying to create a banner that had 3 versions of 1 slide containing 1 image.
I know how to do this with display: none but that means all the content is loaded and it will effect load speeds on slow networks or mobiles.
I'm not a javascript or jquery wiz so the simpler the better please.
What i would like to do is:
on screen resolutions up to 620px
{Load this HTML }
on screen resolutions 621px to 920px
{ Load this HTML }
on screen resolutions 921px and above
{ Load this HTML }
Is this possible?

Answer 1

You could handle this with CSS screen queries but like you say it will load them all and hide them. So you would have to go down the route of JQuery me thinks.

Answer 2

I think the better way to do this's with CSS.
Per example, to make all images responsive:
img {
max-width: 100%;
height: auto;
}
check the another tricks>>
Or you can do this via #media's:
#media (max-width: 979px) {
(css here - widths < 979)
}
#media all and (max-width: 767px) and (min-width: 400px) {
(widths between 400 and 767)
}
#media all and (max-width: 399px) and (min-width: 0px) {
(widths between 399-0px)
}
Hope I helped.

Answer 3

"Is this possible?"
Yes, but in order to maintain code simplicity you'll need to use a different method: Send the user to one of three different pages depending on his screen width, instead of loading a new div in the same page. I'll explain how you can do it step by step. Here we go:
How to check the user's screen width with JavaScript:
if(window.innerWidth <= 620){
// The window width is less or equal to 620px.
}
if(window.innerWidth > 620 && window.innerWidth <= 920){
// The window width is greater than 620px and less or equal to 920px.
}
if(window.innerWidth > 920){
// The window width is greater than 920px.
}
You can also simplify this code a little bit if you store the window.innerWidth value in a width variable, like this:
var width = window.innerWidth;
Then you can use if(width > 620){/* Code here */} to check if the window width is greater than 620px.
Now you'll create two or more pages, each one with a modification and then send the user to another page if his screen size is X. To do so you'll only need to use location.href="#"; inside the above ifs and replace "#" with the other pages URL.
Handling page resize:
The above codes are examples on how you can check the user window width, but the browser will run this code when the page has loaded, one time only, but not when it's resized. To make this code run anytime the browser is resized you'll need to wrap these ifs in a function and call it using an EventListener, that'll say to the code when the browser is resized.
Final code result:
Here's the final code ported to a function, called inside an EventListener and sending the user to another page:
function checkWidth(){
var width = window.innerWidth;
if(width <= 620){
location.href = "#"; // The window width is less or equal to 620px.
}
if(width > 620 && width <= 920){
location.href = "#"; // The window width is greater than 620px and less or equal to 920px.
}
if(width > 920){
location.href = "#"; // The window width is greater than 620px.
}
}
window.addEventListener('resize', checkWidth);
checkWidth();
JSFiddle Demo