This is a simple example of cache vary based on devices, divided by desktop, mobile and tablet.

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 the above exemplary user agent, we will use ''Android'' or ''iPad'' as the user agent to detect tablets , ''iPhone'' or ''Mobile'' to detect mobile, and consider all the rest desktop. This is a simple solution but it should cover most cases. The rules can be further extended to match more specific cases.




PHP example code:

<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'; }</code>

**.htaccess** code:

<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]
</code>

The first rule will cache every page for 120 seconds.

The second rule will check the user agent. If it contains the keyword ''iPad'' or ''Android'' it will set vary to ''istablet''. If the user agent ALSO contains the keyword ''Mobile'' though, such as from an Android Mobile device, it will set vary to ''ismobile'' instead of ''istablet''. All other user agents are treated as desktop.


Test:

<code>[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</code>

<code>[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</code>

<code>[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</code>

<code>[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</code>

<code>[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</code>

<code>[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</code>


So each device hit cache and is showing varied cached content.