Blog Documentation Book a Demo
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to force tablets to use Mobile Theme

webserviceswebservices New
in Feedback

I have searched through the forum and have not found an answer to being able to force tablets with a screen width of 800px and less to use a mobile theme and not the desktop theme. I think it is as simple as adjusting a number somewhere in scripting that tells when to change to mobile theme views but I have not been able to find where.

I am using "Embed friendly" for Desktop and "mobile" for mobile on Vanilla 3.3 embedded in Wordpress.

The embed frame container is 944px wide.

Comments

  • manticore789manticore789 New

    I think the sizing detail will be in the CSS file of the theme that you use.

  • webserviceswebservices New

    Not the break point where Vanilla detects Mobile and switches to the mobile version. I do see in Vanilla code that there is a "tablet" variable but haven't found a definition for it or where to adjust the code so that tablets also use mobile.

  • R_JR_J Admin

    Breakpoints are a CSS thing. A Vanilla theme is not only about JavaScript and CSS files, it also has server side PHP files. Therefore it is required to "know" which theme to serve as soon as possible. There is a function in the framework which tries to find out the "user agent" of the browser. But that function right now tries to distinguish between "mobile" and "desktop".

    I guess there are two ways to achieve what you want. Both require that you implement a PHP solution that detects a tab. You might be able to hook soon into the boot process and use the function userAgentType() to set it to "tab" if your function detects a tab.

    You could also override the function userAgentType. There are a couple of things to take care of

    1. The input parameter * @param string|null|false $value The new value to set or **false** to clear. This should be one of desktop, mobile, tablet, or app.
    2. The correct output * @return string Returns one of desktop, mobile, tablet, or app.
    3. Handling of server variable HTTP_X_UA_DEVICE
    4. Handling of cookie X-UA-Device-Force
    5. Handling of server variable HTTP_USER_AGENT = vanillamobileapp

    The default return of that function is "desktop" and there is no way it could ever recognize a tab by now. But to be fair: there is no use for recognizing a tab by now. But it might make sense to make the default return configurable!

    So if you rewrite that function and think about making it a pull request, make sure it does not return anything other than expected. If you use it just for yourself, the first approach would be better.

  • webserviceswebservices New

    Thanks for the advice @R_J !

    I decided to take the easy (sort of) route and build a template that works for both Desktop and Mobile. The biggest issue I was having was that the Flyout menu scripts were not functioning properly in the newest browsers on mobile. It often took 3 or 4 touches to get them to stay open. It was frustrating for many mobile users. My goal was to have all menu items in 2 rows at the top which seems to work better though they wrap to 3 or 4 rows on mobile. Still it eliminated the need for the flyout scripts to function.

  • R_JR_J Admin

    Glad you solved it - whatever approach worked for you. I would be lost if I had to find out a CSS solution 😉

Sign In or Register to comment.