WP Mobile Detector, W3 Total Cache, Home Page, Blackberry Viewport, Responsive

I’m using WP Mobile Detector with W3 Total Cache and a responsive layout (media queries), and I have a few issues:

1. When I view the site locally (localhost) on a Blackberry, it looks good; the zoom/viewport is correct, media queries have trigger correctly etc. However, when I view the live site on the Blackberry, the viewport has zoomed out. In the context of a responsive layout, locally I see two columns, but on live I see all six columns (i.e. the Blackberry thinks it is a full browser – quite annoying!).

   Read More

   • WooCommerce: get_current_screen not working with multi language
   • Can’t login on WordPress
   • WordPress: Ajax not working to insert, query and result data

2. I thought I would deactivate W3 Total Cache to see if that was having any effect: yes, it was. When the cache is off, the viewport/zoom is good and all is well. Problem solved? Not quite…

3. With the cache off, I navigate to the live site and while the sub-pages of the site – e.g. www.SITE.com/about, www.SITE.com/contact – are responding with the mobile theme, when I click a link back to home (or type it into the address bar) – i.e. www.SITE.com/ – I’m no longer delivered the mobile theme, just the normal ‘desktop’ theme. If I go back to a sub-page I see the mobile theme again. What’s going on there then.

4. When viewed on the Blackberry (for example), if I click the ‘View Full Site’ link (which triggers a Javascript function to modify the cookie) it doesn’t show the full site (i.e. normal theme), it just refreshes and shows the mobile theme. However, when viewed in Firefox on the desktop (via a User Agent Switcher) the link DOES modify the cookie and switches back to the normal desktop theme.

Thoughts/Questions

W3TC does work with WPMD (mobile theme delivers minified JS/CSS), but maybe I haven’t configured something correctly. The following two links were very useful and I have implemented the changes suggested:
— http://snipplr.com/view/47970/wp-mobile-detector–w3-total-cache-integration/
— http://journal.code4lib.org/articles/6223

Is this a known [Blackberry HotSpot/Internet Browser] issue? I have added the requisite meta tags in the document head to indicate viewport data, and the HandheldFriendly meta data which I understand is mainly for Blackberry purposes. As I said, it looks ok with the cache switched off, excepting the home page issue.

I should say it works nicely in Firefox with the User Agent Switcher extension set to iPhone 3, and I have none of the Blackberry issues.

WPMD works by setting a cookie. This appears to be working, else I wouldn’t have seen the mobile theme at all.

Does the Blackberry have a problem with the Javscript function? Not easy to tell from the phone itself – might need to drop in a JS error monitor (I was looking at one the other day).

Who’d have thought mobile dev would be so tricky!

UPDATE 1

It’s a few weeks since first posting, and I will soon be following Joshua and Frederick’s advice to uninstall and then reinstall the [latest version of] W3TC and I’ll post my results.

I found that different browsers (both desktop and mobile) treat javascript redirect statements differently. For example:

setTimeout(function(){window.location.reload();},10)
window.location.reload();
location.reload();

The three lines above effectively perform the same action (slightly different implementations, depending on your needs), but I had varying success across browsers using each one – Chrome worked with one, Firefox another, etc.. Unfortunately, I still could not get the Blackberry browser to perform a proper automatic refresh via Javascript.

What else…so, switching between desktop and mobile using a desktop PC/browser has proven interesting. Let’s say we’re on the desktop version, and we switch to the mobile version of the page. We’re OK so far, but then we switch back to the desktop version of the page. Still OK, but if we quickly click a link on the desktop page to go to another [desktop] page then we may find ourselves looking at the mobile version instead of the desktop version.

So, what happened there? As the page was still loading when we clicked another link, did we interrupt something? Presumably not, as the cookie would have been set and sent in the previous request from the mobile version of the page to say, e.g., “show-desktop-version = true”. If we do hit F5 or the browser’s ‘Refresh’ button (or, in fact, a link to any other page) then we do see the correct mobile or desktop version (respectively).

Another interesting thing: say we’re on our mobile version (using desktop browser), and we’re looking at site.com/mypage, and on the page is a link to ‘View Full Site’ (VFS). We click VFS once and it refreshes but we’re still seeing the mobile version. So we click again – same result. So we click again, and again, and again, and again, and – oh, OK this time it switched to the full site. This cycle/process seems to occur once, and then not for a while, and then happens again.

UPDATE 2

Regarding the mobile-desktop theme switching problems, please disregard my notes in ‘Update 1’. One of my switcher links (from desktop theme to mobile), e.g….

<a href="?dothemeswitch" onClick="funcSwitchToMobile()">View Mobile Site</a>

…was using the query parameter (as you can see). I had used this technique to test whether a mobile browser was preventing a proper refresh as the link pointed to the same/current URL. The switcher link should have actually looked like this,

<a href="#" onClick="funcSwitchToMobile()">View Mobile Site</a>

…with just a hash to allow the link to be clickable, while allowing the Javascript function to do its magic (update cookie, reload page).

Problem resolved.

(W3TC + WPMD compatibility still an issue for me – will post updates).