How to load a section of content only if the screen is over a certain width?

[benpearson]

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?

Any help much appreciated.

[Historical Forums User]

Currently PHP does not have a native client view port detection function. However, you could use javascript or even better Jquery to do this if you wanted.

##Jquery Option

var viewportWidth = $(window).width();

var viewportHeight = $(window).height();

While this method has good support, I would make sure that the webpage is still fully functional and no vital content is missing. Take into consideration accessibility, clients with JavaScript disabled and whatever else could go wrong.

What content are you trying to load? ex. Videos, Text, Images…

[benpearson]

Thanks Aaron.

The content I’m thinking of is supplementary and non critical eg. extra images, sliders etc.

If I use jQuery to remove the unnecessary content, isn’t it still being downloaded and having an effect on page speed?

[Jinksi]

Sorry for being a noob, but couldn’t you use display:none; ?

I thought that this won’t load until display:block;

[Historical Forums User]

Yeah that’s true once JavaScript is executed ServerSide processing has ended and you would be limited to AJAX commands .
Example:

(function () {

var viewportWidth = $(window).width();



if (viewportWidth > 1400) {

$('#wrapper').load('/ajax/largeScreen.php');

} else {

$('#wrapper').load('/ajax/smallScreen.php');

}

}());

You can also use this to change the ‘src’ of a video file in order to display low quality and high quality.

This has a limited use an you are better off sticking with media queries for the most part, but here is the option if you can find a practical use for it.

##display:none;
this is a style property that is applied after the DOM has loaded, it will remove the element from the document flow, but the element is still loaded.

[Podders]

Most browsers (if not all) won’t load the assets in a media query until the breakpoint is hit.

[benpearson]

Thanks again Aaron.

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?

[Podders]

Hi, yes I was talking about assets defined in css as background images etc,

Simple answer is that you can’t stop assets that are added directly to the dom from loading regardless of the screen size, so if you have a large image added using the img tag then that asset will always downloaded, even if you hide it using javascript

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,

http://secure.codepen.io/anon/fulldetails/DErof
(Full pen here)

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.

[benpearson]

Thanks very much Podders. Very helpful.

@ChrisP I will definitely look into Response.js.

[Alen]

@bempearson watch AJAX section of this tutorial: [30 Days to Learn jQuery](https://tutsplus.com/course/30-days-to-learn-jquery/)

[Podders]

Sorry to raise an old thread, but this question got me thinking about html comments and media queries,

Response.js is an awesome script but is a little complex and heavy weight for my liking, plus the node has to exist in the dom to be manipulated by response.js

I wrote a small proof of concept jQuery Plugin that allows you to comment a section of the dom, then add a media query to define when that section should be injected,

Example:

The only real downfall is that you cannot nest html comments but other than that it seems to work ok on browsers that support media queries?

Source for this is on git at: https://github.com/Podders/Jquery-Media-Comments/

[Author]

Posts