Mobile Theme not working on mobiles?

fuzz · November 2012

Hey,

Recently I've received feedback from my users saying that forum looks really weird on mobile (android/iphone).

Here's the link: http://makeupadviceforum.com/forum/

Basically when you launch forum on iphone everything is squashed, and mobile theme is not applied.
Is there any way to force Mobile Theme to be used when someone is using phone?

Kasper · November 2012

I've already reported this bug here: https://github.com/vanillaforums/Garden/issues/1486
A workaround is to disable the new asset handler as described here: http://vanillaforums.org/discussion/comment/170680/#Comment_170680

fuzz · November 2012

@kasperisager thanks for answer.
So should I add 'DebugAssets' = TRUE in my config file?

Like:

$Configuration['Garden']['DebugAssets'] = TRUE;

Because I don't have DebugAssets at my conf file.

peregrine · November 2012

the info on"

$Configuration['Garden']['DebugAssets'] = TRUE;

changes the way themes are "globalized"

if set to TRUE if will be the old style w/ custom.css and stryle.css

if non-existent or FALSE if will be the new one "all-encompassing" css

style-nnnnnnn.css (which includes all the css files that are read and converted into the "all-encompassing" css

vrijvlinder · November 2012

May I ask what mobile theme you are using? The forum looks bad when the iphone is vertical but looks fine when it is horizontal. I think you need to fix the mobile theme. It seems too wide like it thinks it is a larger viewport . It is your mobile theme because it has the link to the full site at the bottom. Just the width is funky.

Also maybe check the class.mobilethemehooks.php

  /**
    * Add mobile meta info. Add script to hide iphone browser bar on pageload.
    */
   public function Base_Render_Before($Sender) {
      if (IsMobile() && is_object($Sender->Head)) {
         $Sender->Head->AddTag('meta', array('name' => 'viewport', 'content' => "width=device-width,minimum-scale=1.0,maximum-scale=1.0"));

That tells the size of the device so it displays properly.

Kasper · November 2012

@fuzz: Add this to your config file (['Garden'] is not needed):

$Configuration['DebugAssets'] = TRUE;

@vrijvlinder: The problem with the mobile theme is due to the fact that the new asset handler does not correctly distinguish between mobile and desktop user agents as outlined in the issue on Github (the first link I posted). The asset handler therefore serves the concatenated desktop and default stylesheets whilst Vanilla loads the mobile master view on mobile user agents like one would expect. Reading each individual post in a discussion and following the posted links is pretty important to properly understand what's being discussed :-)

vrijvlinder · November 2012

Thanks for that kasperisager I try to always read it all, You know, I had the same issue with the default mobile theme , so I made my own using only css to fix the problem. Which is why this reminded me of what happened in the forums I installed. After implementing the new theme everything worked even on other devices or using it as a desktop theme or an embed.

After seeing their site on my iphone , it was like, that's what mine looked like !

So what you diagnose (according to your bug report) is that the asset handlers are not handling the mobile sheet and serving instead the full site sheet? If that was the case, then why is there a link to the full site ? I would guess that was the mobile theme and it is being served but the theme is messed up.
That can be a possibility no?

Also the display is fine in horizontal view on that site. What I see is the mobile style is messed up. Some fonts are way huge and some too small.
Below is a screenshot of the mobile theme . Maybe they could test this theory of mine by using another mobile theme?

Also would like to add that your css fuzz has 678 errors in css3 and over 1200 in css2 I would suggest you validate and clean up your style sheet. That may solve many problems.

link to W3C css validation service. It will show you the errors and generate a clean valid code.
http://jigsaw.w3.org/css-validator/

peregrine · November 2012

@kasperisager said:
fuzz: Add this to your config file (['Garden'] is not needed):
$Configuration['DebugAssets'] = TRUE;

arrgh! You're right. That's what I get when I copy and paste. I should have just pointed to this comment

http://vanillaforums.org/discussion/comment/170608/#Comment_170608

Kasper · November 2012

@peregrine: Cool, hadn't seen that before :-)

@vrijvlinder: Look... While I admire your enthusiasm, you keep coming off seemingly ignorant to a lot of things, no offense meant. I've spent hours and hours looking into this problem, I've diagnosed it and I've filed an issue to the devs who are already aware of the problem. This has nothing to do with invalid CSS or conflicts of any kind. FYI, the W3C validator is simply a tool to make your code standards compliant - modern CSS features are not standards compliant as per W3C but works great none the less. Please try to read what I wrote earlier:

The asset handler therefore serves the concatenated desktop and default stylesheets whilst Vanilla loads the mobile master view on mobile user agents like one would expect.

Would this explain to you why the mobile master view shows the link to the full site whilst the CSS is messed up? Indeed.

As a sidenote, I made the theme they're using and that is not how it looks on mobile devices. The asset handler is currently bugged and that's what's causing the problem. Randomly switching plugins on/off has proven to help and so has putting the asset handler into debug mode. End of story so far until a fix is provided.

vrijvlinder · November 2012

Thanks again, kasperisager, no offense taken, I am trying to understand this myself.
Ignorant people can learn trust me.
I take it you looked at the css, it may not have anything to do with this problem but it is messed up.Hundreds of parse errors.

I did notice that not just the default style sheet and custom are being conflated into one, also the cleditor and emotify coming together as one. But not the mobile sheet. I gather that is the defect you reported. Makes the sheet the longest I have ever seen. Plus I have never seen all style sheets in one file period.

/* CSS generated for etag: f80c536e.
 *
 * /applications/dashboard/design/style.css
 * /plugins/cleditor/design/jquery.cleditor.css
 * /plugins/Emotify/design/emotify.css
 * /themes/Bootstrap/design/custom.css
 */

/* File: /applications/dashboard/design/style.css */

http://makeupadviceforum.com/forum/utility/css/style/style-f80c536e.css

I recall fuzz say that this forum is a mix and match from old pb forums. I never said your theme was bad . It is a great theme. People can mess up great things too. I hope we get a solution. Or that it is intermittent and not permanent.

fuzz · November 2012

$Configuration['DebugAssets'] = TRUE; works perfect without ['Garden']! Now Bootstrap theme is displayed on Desktop, and Mobile Theme on phones.

Thank you guys so much for your help and work you do for this community.

Adrian · April 2013

Try also add

body {
   -webkit-text-size-adjust: 100%;
}

To the top of your css, it will make things look nicer.

Mobile Theme not working on mobiles?

Comments