Assuming a mobile first approach. Is it possible to load a section of content only if the screen is over a certain width?
I understand how to show/hide content depending on screen size using CSS media queries. But what if you want to avoid unnecessarily loading content that will hidden on smaller screens. I frequently use PHP and WordPress. Is there a way to do this server side with PHP?
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
What content are you trying to load? ex. Videos, Text, Images…
I am not particularly familiar with AJAX. The code you posted would load/display the contents of largeScreen.php in the element with id #wrapper if the screen width is greater than 1400px. Correct?
If so, this is exactly what I’m looking for. Why do you say it has limited use etc? I would have thought this would be a major tool in keeping page speeds down for devices with smaller screens.
@Podders: Sorry I’m a little confused by your statement. If standard the CSS display:none is used, all the assets specified in HTML are loaded regardless of screen size. The media queries will be for smaller screen sizes to hide unnecessary content. Maybe you are talking background images or something similar where the asset is specified in the CSS and not HTML?
Hi, yes I was talking about assets defined in css as background images etc,
Wherever possible these days I try to add any imagery as background images simply for reasons like this one, css background provide so much more flexibility when it comes to responsive applications and asset management,
The holy grail for times like this would be conditional comments that you can pass a media query into that would only add sections of the dom if the breakpoint is hit …
As ChrisP stated, response.js is the next best alternative, that will allow you to define the element in your markup and pass alternative content or sources to the element via data attributes, and again, because the asset never gets requested until the breakpoint is hit, it doesn’t put any unnecessary load on small screen devices.
Edit: I did try to add the response.js version to the codepen but it seems it’s trying to correct single quotes to double quotes in the markup.