You may need to execute JavaScript code conditioned by the css screen size, for example to have different behaviors on mobile devices (for example 480px).
This article is a support for the Head and Footer plugin.
So, if you need to do something in JavaScript when the screen size is less or equal than 480px, you can write:
var w = document.documentElement.clientWidth || window.innerWidth;
if (w <= 480) {
// Probably mobile
} else {
// Probably desktop
}
Actually you’re not interested if something is mobile or desktop, you’re interested in the screen size of your user and adapt the content to it. That is the simple truth.
With the code about you can do a lot of page manipulation. For example, you can remove an ad block from within the post when you’re in a large screen context since you have the ad in the sidebar.
Or, vice versa, you can remove the ad block from the sidebar when you’re in a mobile context, since the sidebar is hidden using the CSS media queries.
Note: remove something form the DOM is different that hiding it.
