Ok, let’s clarify the concept.
You don’t want download the content for mobile device, and you want to rely on screen resolution. You know that php (wordpress) run on server, screen resolution is a completely client-side matter.
So the flow will be:
- user send a request to your site
- your site page load on client
- some js run on the client, recognize the resolution and in some condition run ajax to send a request to server and load the shortcode
What’s wrong here? Simple: screen resolution is not enough to know client device. E.g. in this moment I’m writing from a desktop PC with a monitor of 26″, but the browser window is not in full size and probably is low than 800 px. For me the flow below will not load shortcode. Is this what you want? I don’t think so.
Maybe you can rely on a window.resize js event so when I change my window size to be more than 800 px you load the shortcode otherwise you remove the shortcode.
In this case an ajax request is sended to server when a client resize window in a way that it exceeds the breakout resolution:
jQuery().ready( function($) {
function load_shortcode() {
if ( $(window).innerWidth() > 800 ) {
if ( $('#slider .slider-content').length && ! $('#slider').is(':visible') ) {
// slider was loaded but is hidden, show it
$('#slider').show();
} else {
// slider never loaded, load it
$.ajax({
url: myscriptvars.ajaxurl,
data: { action: 'load_slider_shortcode' }
}).done(function(output){
if (output) $('#slider').html(output);
});
}
} else {
// slider is there but window was resized in less than 800px: hide it
if ( $('#slider .slider-content').length) $('#slider').hide();
}
}
$(window).resize(function() {
load_shortcode();
});
load_shortcode();
});
Is this what you want? Maybe, but there is another solution (a better solution in my opinion).
WordPress as a function wp_is_mobile that recognize mobile device, but it return true even if device is a 10″ tablet with hi-res screen. This is not ideal but there is a script than can help you. It’s Mobile Detect.
How use it: download it and put in a folder. For semplicity I assume it is in your theme root. In your page, where the shortcode have to appear put someting like:
@include_once( trailingslashit(TEMPLATEPATH) . 'Mobile_Detect.php' );
$detect = new Mobile_Detect;
$ismobile = ( $detect->isMobile() && ! $detect->isTablet() ); // true only for phones
if ( $mobile ) echo do_shortcode('[metaslider id="8302"]');
That’s all. No need ajax, no need rely on window.resize and phone never download your shortcode, PC and tablets download it always.
If you want to avoid tablets download slider, remove second condition inside if statement.
To improve solution you can also hide slider on low resolution via css media queries, so desktops and tablets with resized window (like the mine, now) don’t view the slider.
Not perfect, sure, but at this time I think there is not perfect solution for that matter and this last one seems to me the best among the possibilities.