How to dynamically re-serve content based on browser width?

Question

I'm setting up a wordpress website right now and I'd like to make 2 separate do_shortcode("[]")s based on how wide the browser is, and have the content refresh and change if the browser width is changed. Is there any way to do this? My understanding from reading other threads about PHP/Javascript is that since PHP is run before JS, the two can't interact with each other very well. Is there a best way to do this?

Thanks for your help!

Answer 1

If you want to change the layout of your site like: if the browser-min-width = 960px change background-color to red,

and if the browser-max-width = 960px change background to green.

If you want something like this just put the following in your css-file:

@media only screen and (min-width:960px){
   //DO something
}

@media only screen and (max-width:768px){
   //DO something
}

@media only screen and (min-width:768px) and (max-width:960px){
   //DO something
}

If you want to do it in javascript use the following code:

if (window.matchMedia('only screen and (max-width: 960px)').matches) {
//DO something

}

if(window.matchMedia('only screen and (min-width: 768px) and (max-width: 960px)').matches) {
//DO something

}

I hope this helps. Sorry if I misunderstood your question and this is not the answer you searching for.