This is an old revision of the document!

This is a simple example for cache vary based on devices , as classified in desktop , mobile and tablets.

Chrome 76 on Windows 10:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3163.100 Safari/537.36

Chrome 76 on Android 8 mobile:

Mozilla/5.0 (Linux; Android 8.0.0; LG-H870) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.12 Mobile Safari/537.36

Chrome 76 on Android 8 tablet:

Mozilla/5.0 (Linux; Android 8.0.0; SM-T825) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3786.0 Safari/537.36

Safari on iPhone:

Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/ 604.1.21 (KHTML, like Gecko) Version/ 12.0 Mobile/17A6278a Safari/602.1.26

Safari on iPad:

Mozilla/5.0 (iPad; CPU OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/16A5288q Safari/605.1.15

For above exemplary user agent, we will use Android or iPad in user agent to detect tablets , use iPhone orMobile to detect mobile , and consider all of rest are desktop, this is a simple solution , but it should cover most cases though, the rules can be further extended to match more specific cases.

PHP example code:

<?php
if (stripos($_SERVER['HTTP_USER_AGENT'],"iPhone")!==false  || stripos($_SERVER['HTTP_USER_AGENT'],"Mobile")!==false ) {
   echo 'This is Mobile view'; }
elseif (stripos($_SERVER['HTTP_USER_AGENT'],"iPad")!==false or stripos($_SERVER['HTTP_USER_AGENT'],"Android") !==false) {
 	echo 'This is Tablet view'; }
else {
echo 'this is Desktop view'; }

.htaccess code:

CacheLookup public on
RewriteRule .* - [E=cache-control:max-age=120]

RewriteCond %{HTTP_USER_AGENT} iPad|Android [NC]
RewriteRule .* - [E=Cache-Control:vary=istablet]

RewriteCond %{HTTP_USER_AGENT} iPhone|Mobile [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]

First rule will cache every page for 120 seconds.

Second rule will check user agent , if it contains keyword iPad or Android , it will set vary to istablet and on next rule , if the user agent also contains Mobile as from Android Mobile device, it will set vary to ismobile and all other user agents are treated as desktop.

Test:

[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: Android"
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Etag: "62-1566258748;;;"
X-Litespeed-Cache: hit
Content-Length: 19
Date: Mon, 19 Aug 2019 23:52:28 GMT
Server: LiteSpeed
Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000

This is Tablet view

[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: Android Mobile"
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Etag: "63-1566258751;;;"
X-Litespeed-Cache: hit
Content-Length: 19
Date: Mon, 19 Aug 2019 23:52:31 GMT
Server: LiteSpeed
Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000

This is Mobile view

[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: iPad"
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Etag: "62-1566258748;;;"
X-LiteSpeed-Cache: hit
Content-Length: 19
Date: Mon, 19 Aug 2019 23:52:37 GMT
Server: LiteSpeed
Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000

This is Tablet view

[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: iPhone"
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Etag: "63-1566258751;;;"
X-LiteSpeed-Cache: hit
Content-Length: 19
Date: Mon, 19 Aug 2019 23:52:40 GMT
Server: LiteSpeed
Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000

This is Mobile view

[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: Windows"
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Etag: "64-1566258765;;;"
X-Litespeed-Cache: hit
Content-Length: 20
Date: Mon, 19 Aug 2019 23:52:45 GMT
Server: LiteSpeed
Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000

this is Desktop view

[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: others"
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Etag: "64-1566258765;;;"
X-LiteSpeed-Cache: hit
Content-Length: 20
Date: Mon, 19 Aug 2019 23:52:48 GMT
Server: LiteSpeed
Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000

this is Desktop view

So each device hit cache and showing varied cached content.