How to set the cache if the website differnt themes for desktop and mobile

The website has been designed with two themes(WordPress), one for desktop and one for the mobile, we are using the plugin to detect the mobile device and then redirect the mobile users to the optimized mobile theme, hence, the URLs are exactly the same between desktop and the mobile phones.

However, some of the pages if visited on desktop, it shows the mobile theme, and if on the mobile phone, the theme still shows the desktop version.

I tried to set the browser cache ttl to respect the existing header and purge the whole cache, it works like a charm, but after some while, the page still redirects to the mobile theme, and then I tried to create the page rules to bypass the cache for the plugin folder. It seems still doesn’t work.

So what should I do to get rid of this issue? Thank you for your help.

My page rules:

Cahce Everything for the whole website and Origin Cache Control is On.

You really should switch to a single responsive theme design so caching is easier. Cloudflare free, pro and business don’t have features to support differentiating cache for mobile vs desktop. Cloudflare Enterprise plan would in theory as it supports custom cache keys and using mobile vs desktop vs tablet detection as part of the cache key so you could have separate caches for desktop, mobile and tablet visits.

1 Like

I switched to responsive theme after facing the same issue. Problem is indeed gone, as Clouflare was sometimes serving mobile version to desktop users, and there is no quick fix for that.

1 Like

Thank both for your quick replies, I finally decided to set the page rules: Cache Level: Standard, seems to working fine right now. The disadvantage is that the speed is not faster than Cache Everything. Anyway, it’s better than redirect the users to the Mobile theme if there were using the desktop browser.

Thank you again.

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.