Wrong display for mobile, tablet or desktop

This article is useful if you have issues with the mobile version of your site being shown to desktop users, or vice versa.

By default, WP Rocket will create two sets of caching files, one for desktop and one for mobile devices, as per the Mobile Cache option. 

With this configuration, any content that's specific to mobile or to desktop devices, should be cached and served accordingly.

However, if you have issues, please refer to the following sections to find the possible problems, and the solutions.

Additional cache layers

Other layers of caching running on your site, such as Varnish, NGINX, Cloudflare's Cache Everything, etc., may not be configured to distinguish between mobile and desktop visitors.

Additionally, the following problems within WP Rocket options can happen when there are other when using additional cache layers that don't support mobile-specific cache:

• Remove Unused CSS: Mobile-specific issues - The mobile-specific CSS may be missing.
• Optimize critical images: Known conflicts - The wrong optimized images can be served to the wrong device type.

Also, any custom or third-party feature that depends on the  wp_is_mobile() function may be affected.

Solution: it's recommended to deactivate those additional layers of cache, and let WP Rocket handle caching for desktop and mobile.

Treat tablets as mobile

By default, the Mobile Cache feature works on phones only. It does not consider tablets as “mobile” in the context of page caching, therefore, the default cache (for desktop) will be served to tablet devices.

Solution: you can modify this default behavior to treat tablets as mobile with this helper plugin:

📥 Download (.zip): WP Rocket | Set tablets as mobile
Developers: you can find the code for this plugin on GitHub.

The helper can be useful if your theme or plugin uses the wp_is_mobile() function, which treats tablets as mobile devices.

Alternatively, you can exclude those devices from the cache, based on the user agent. 

In WP Rocket's Advanced Rules tab, locate the field labeled “Never cache (user agents)” and add the following list (one per line): 

iPad
NexusTablet
SamsungTablet
HPTablet
AsusTablet
BlackBerryTablet
HTCtablet
MotorolaTablet
AcerTablet
ToshibaTablet
LGTablet
FujitsuTablet
LenovoTablet
DellTablet
SonyTablet
PhilipsTablet
HuaweiTablet

The device is not considered as mobile

WP Rocket will serve the mobile-specific cache only to the mobile devices with the user agents in this list.

If a device has a different user agent, then WP Rocket will serve the desktop-specific cache version.

Solution: Sadly, there's no known solution for this type of limitation.

WP Rocket versions older than 3.16

If you are using any version of WP Rocket that's older than 3.16, and if you have this type of issues, please make sure you have enabled the Separate cache files for mobile devices option. This is found on the Cache tab of the WP Rocket settings:

With this setting, for every page, you will have a cache file that will be shown to desktop users, and a separate file that will be served to mobile users.

Treat tablets as "mobile"

For the WP Rocket | Set Tablets As Mobile helper plugin to work, the Separate cache files for mobile devices sub-option must be enabled.