[Support request] Disable Mobile + Device Check – Possible?

[alex2k5]

Wondering if the following is possible .

1 – Is this plugin still valid for Generatepress and up to date:

https://wordpress.org/plugins/generate-disable-mobile/

If so…

Is there a way to make that active, but then re enqueue the responsive aspects manually after a device check?

I don’t want the mobile / responsive options to activate at all if one is on desktop, iPad or tablets. Only actual phones. As of now, that passes Google’s mobile site requirements. If things are too big for screen due to browser resize etc and trigger scroll bars, so be it. In all possible cases, I want the sidebar on the side and nothing wrapping within content like grids. IMG and similar max-width resizing only.

Checking against WordPress is_mobile won’t work unfortunately, because it considers tablets mobile. So would need to reference a custom check or plugin.

Before I moved to Generate for development, I was going to have all mobile coding in separate file and only load that file after a check. Currently running a child theme and only adding my edits to the style.css. But since the media queries are littered in the entire core style.css, and additional css files, it’s going to require a full CSS rebuild to do this.

Just looking for suggestions on the best way forward to achieve the above.

[Tom]

Hi there,

That plugin is super old and likely doesn’t work anymore.

The mobile CSS in the theme is super minimal and bundled in the main.min.css file, so it’s not possible to separate it/tell it not to load.

You could dequeue the javascript file on desktop, but it may have unintended consequences and would only end up saving 1-2kb.

Let me know if you need help with that 🙂

[alex2k5]

Yeah, no desire to dequeue the javascript. Just want all the media query based css non-functional on all devices other than literal phones, regardless of viewport or dimensions. Don’t care so much about KB, just want the functionality gone.

So to achieve that I should…

Copy the core CSS files into the child theme
Edit all media queries out
Add the media queries to a new css file
Run a device check
Load that new file if the device check returns a phone, in an order that it takes precedent.

First, does that seem a correct path within the Generatepress world to get this done?

If so, how often does core css change that updating the parent theme could cause conflicts / issues? Essentially every single line of CSS will be overwritten in the child theme if done like this. Seems a bit overkill, so just want to be sure before I dig in.

Thanks!

[Tom]

While that would work, it would be something you’d need to do after every single update, or you’d need to at least update it with every update as we typically adjust the CSS for bug fixes/added features.

What exactly is the desired result here? You don’t want the site to be responsive when resizing your browser, only when viewing it on a device?

[alex2k5]

What exactly is the desired result here? You don’t want the site to be responsive when resizing your browser, only when viewing it on a device?

Correct. Desktop, Tablets – non responsive. No wrapping of sidebar, no single column grids, etc. Just old school display as fixed width design.

Phones, literal phones – execute the media queries and therefore the responsive version.

I only want folks viewing the mobile version of the site on devices they can grip with one hand.

[Tom]

Give this function a shot:

add_action( 'wp', function() {
    if ( ! wp_is_mobile() ) {
        add_filter( 'generate_meta_viewport', function() {
            return '<meta name="viewport" content="width=1024">';
        } );
    }
} );

[Author]

Posts