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?
Use a media query in your css.
Something like this:
@media (max-width: 767px) {
.styleName {
display:none;
}
}
This hides the css element if the window size is less than 767px. You do need the right markup in your html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To hide a div on a mobile view, you need the right window size. This is about right from the bootstrap framework:
/* Landscape phones and down */
@media (max-width: 480px) { ... }
To implement this into your code, you would use:
<div id="bg" class="styleName">
CODE
</div>
Read up more here:
Mobile Device Trick
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:
- 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.
- 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.
- 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.
