Remove function depending on screen size

Question

I am making a responsive theme that on some pages uses a slider/calculator, I have a normal version (slider.php) and a small version (small-slider.php) for smaller screens/mobile devices.

I want to remove the normal version and replace it with the smaller version depending on screen size.

How do I do this?

Thanks in advance :)

You don't really want to remove a function depending on screen size; you want to remove a rendered DOM element. The easiest solution is to use [CSS media queries](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) to hide whatever section of your page is employing the undesired element. — Blazemonger, May 16 '13 at 18:05

score 1 · Answer 1 · answered May 16 '13 at 17:58

You can not remove a PHP function depending on the screen size of the browser, other than detect if it is a phone, or not using the PHP provided SERVER variables, but if you do not want to show what your function echo when you are using mobile phone, you can use display:none value, in your CSS to whatever the function echoes, from being desplayed

score 1 · Answer 2 · answered May 16 '13 at 17:59

1

Your best bet would be to not include either, then once the page loads use javascript detect the browser window size and use Ajax to pull the appropriate calculator.

answered May 16 '13 at 17:59

Pitchinnate

7,517
1
20
37

score 1 · Answer 3 · answered May 16 '13 at 18:02

You can do this in your css:

@media screen(max-width:1000px) {
    body {
        background:#000000;
    }
}

@media screen(max-width:100px) {
    body {
        background:#ffffff;
    }
}

This way you'll be able to do stuff, if you dont want something, just removit by doing something like this in the CSS.

score 1 · Accepted Answer · answered May 16 '13 at 18:40

you can't detect screen size using PHP.. but if you insist you can check if it is accessed from a mobile device via User Agent Strings

i used this library before to check if a user is accessing the site in a mobile, a tablet or a desktop device..

https://code.google.com/p/php-mobile-detect/

there, you can do something like this:

include 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Check if acessed from mobile

if ($detect->isMobile()) {
    include 'small-slider.php';
} else {
    include 'slider.php';
}

take note that that $detect->isMobile() will return true on tablets too, so if you want only mobile devices to use the small slider, use this instead:

if ($detect->isMobile()&&!$detect->isTablet()) {

» see the API for more info

although based from experience, this is a better approach for separate mobile sites than for responsive design.

Remove function depending on screen size

4 Answers4