jquerymobilefluid-layout

Removing HTML element on mobile view?

I am not using jquery mobile.

I built a template in WordPress and have a full width background that can be set to a different one for each page: Background_1.jpg = Home, Background_1.jpg = About, ens....

This is what is loaded in the front end:

<div id="bg">
    <img id="background" src="images/Background_1.jpg" alt="background">
</div>

So my problem is the following:

When i get to the fluid grid layouts i would like to remove this element completely to speed up the load time.

I also dont want to hide it, i want to remove the html when the window size is smaller than 600px.

Has anyone done this before?

Solution

  • Many years later and lots of testing as well as training and general experience.

    There are different solutions that I have found works best for instances like this:

    1. Optimize your images with a PHP image library which can easily be done within WordPress, that will make the images web friendly and load faster on all devices.
    2. Detect the screen size on the Apache request with PHP and load the template file with hooks. Like the AMP plugin loads a different theme for mobile.
    3. Detect screen size with PHP and optimize/generate images according to the size.

    I used PHP Image Library along side my WordPress to generate and load the images in the size and quality I want and allows me to change size on the fly.

    For the screen/user-agent detection I use Mobile-Detect.

    You can also combine both of these solutions for best results.