[Solved] See Mobile version while viewing from desktop device

M

mirzaishfaq

Member
#1
#1
I installed latest litespeed module https://prnt.sc/SlfriOy9fv8h. I'm using opencart 3.0.3.8 with Journal 3 theme

some of or some time my category page or product page show mobile version on desktop computer. it happened everyday so each day i have to to purge cache from my admin panel to fix the view.

this is my .htaaccess configuration.

### LITESPEED_CACHE_START - Do not remove this line
<IfModule LiteSpeed>
CacheLookup on
## Uncomment the following directives if you has a separate mobile view
##RewriteEngine On
##RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini" [NC]
##RewriteRule .* - [E=Cache-Control:vary=isMobile]
## Uncomment the following directives if you has a separate Safari browser view
##RewriteCond %{HTTP_USER_AGENT} Safari
##RewriteCond %{HTTP_USER_AGENT} !Chrome
##RewriteCond %{HTTP_USER_AGENT} !CriOS
##RewriteRule .* - [E=Cache-Control:vary=isSafari]
##RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini" [NC]
##RewriteCond %{HTTP_USER_AGENT} Safari
##RewriteCond %{HTTP_USER_AGENT} !Chrome
##RewriteCond %{HTTP_USER_AGENT} !CriOS
##RewriteRule .* - [E=Cache-Control:vary=isMobileSafari]
##RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini" [NC]
##RewriteRule .* - [E=Cache-Control:vary=isMobile]
##RewriteCond %{HTTP_USER_AGENT} Bot
##RewriteRule .* - [E=Cache-Control:vary=isMobileBot]
</IfModule>
### LITESPEED_CACHE_END
 
AndreyPopov

AndreyPopov

Well-Known Member
#5
#5
mirzaishfaq said:
I have a single responsive theme. It is only for sites where there are two different themes. https://prnt.sc/LWaweTAkuRjV
Click to expand...
by default Journal3 use automatic Desktop and Mobile View detection.
if you not disabled Mobile View in Journal3 GUI.

that's why you must:
- Enable "Seprate View for Mobile Devices" in LSCache plugin GUI
- uncomment in .htaccess corresponding lines
- check that in .htaccess lscache rules placed before any other rules with [L] flag

purge all caches

also if you Enable in Journal3 System->Settings->Performance->Images->Compression(to use webp format)
you must:
- Enable "Seprate View for Safari Browsers" in LSCache plugin GUI
- uncomment in .htaccess corresponding lines
 
M

mirzaishfaq

Member
#6
#6
serpent_driver said:
Yes, but like I remember Journal has a device detection to seperate desktop and mobile devices.
Click to expand...
yes device detection with css media query. are you sure i can enable separate mobile view in litespeed extension for journal theme? I don't think so?
AndreyPopov said:
by default Journal3 use automatic Desktop and Mobile View detection.
if you not disabled Mobile View in Journal3 GUI.

that's why you must:
- Enable "Seprate View for Mobile Devices" in LSCache plugin GUI
- uncomment in .htaccess corresponding lines
- check that in .htaccess lscache rules placed before any other rules with [L] flag

purge all caches

also if you Enable in Journal3 System->Settings->Performance->Images->Compression(to use webp format)
you must:
- Enable "Seprate View for Safari Browsers" in LSCache plugin GUI
- uncomment in .htaccess corresponding lines
Click to expand...
for WEBP images i am using extension so do i still need to Enable in Journal3 System->Settings->Performance->Images->Compression(to use webp format)??

this extension works good to convert webp images OpenCart - WebP Images for Opencart 2x, 3x OCMOD Journal 3 Support .

I will enable
- Enable "Seprate View for Mobile Devices" in LSCache plugin GUI
- Enable "Seprate View for Safari Browsers" in LSCache plugin GUI

but how can i - uncomment in .htaccess corresponding lines? which parts do i have to change in .htaccess file and how can i verify in chrome that it working fine?
 
Last edited:
AndreyPopov

AndreyPopov

Well-Known Member
#7
#7
mirzaishfaq said:
yes device detection with css media query.
Click to expand...
if you have different view for desktop and mobile ( no matter "who" make this) then you must Enable "Separate View for Mobile Devices"!

mirzaishfaq said:
are you sure i can enable separate mobile view in litespeed extension for journal theme? I don't think so?
Click to expand...
yes!!! you MUST Enable "Separate View for Mobile Devices" if you use Journal.




mirzaishfaq said:
for WEBP images i am using extension so do i still need to Enable in Journal3 System->Settings->Performance->Images->Compression(to use webp format)??

this extension works good to convert webp images OpenCart - WebP Images for Opencart 2x, 3x OCMOD Journal 3 Support .
Click to expand...
this is WRONG way use third party extension!
because Safari browser support webp images format only from version 15th and that's why you would have problems (no images) on many Apple devices.

Journal3 itself convert all images jpg/png to webp format (if you system have needed libraries) and provide webp images for Chrome/Firefox/Opera and jpg/png for Safari



mirzaishfaq said:
but how can i - uncomment in .htaccess corresponding lines?
Click to expand...
lines contain help:
Code: 
## Uncomment the following directives if you has a separate mobile view
and
Code: 
## Uncomment the following directives if you has a separate Safari browser view
"Uncomment" is delete ## at line begin

mirzaishfaq said:
I will enable
- Enable "Seprate View for Mobile Devices" in LSCache plugin GUI
- Enable "Seprate View for Safari Browsers" in LSCache plugin GUI
which parts do i have to change in .htaccess file and how can i verify in chrome that it working fine?
Click to expand...
uncomments all commented lines except comments(help) lines :)


my (personal) .htaccess rules for LSCache
Code: 
### LITESPEED_CACHE_START - Do not remove this line
<IfModule LiteSpeed>
CacheLookup on
## Uncomment the following directives if you has a separate mobile view
RewriteEngine On
## Uncomment the following directives if you has a separate Safari browser view
RewriteCond %{HTTP_USER_AGENT} "bot|compatible|images|cfnetwork|favicon|facebook|crawler|spider|addthis" [NC]
RewriteCond %{HTTP_USER_AGENT} !Chrome [NC]
RewriteCond %{HTTP_USER_AGENT} !Mobile [NC]
RewriteCond %{HTTP_USER_AGENT} !Macintosh [NC]
RewriteRule .* - [E=Cache-Control:vary=isBot]
RewriteCond %{HTTP_USER_AGENT} Bot [NC]
RewriteCond %{HTTP_USER_AGENT} Android [NC]
RewriteCond %{HTTP_USER_AGENT} Chrome [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobilebot]
RewriteCond %{HTTP_USER_AGENT} Macintosh [NC]
RewriteRule .* - [E=Cache-Control:vary=isMac]
RewriteCond %{HTTP_USER_AGENT} "iPhone|iPad|Petal" [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobileapple]
RewriteCond %{HTTP_USER_AGENT} Android [NC]
RewriteCond %{HTTP_USER_AGENT} "Chrome|Firefox|Opera|OPR" [NC]
RewriteCond %{HTTP_USER_AGENT} !Bot [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]
</IfModule>
### LITESPEED_CACHE_END
 
Last edited:
M

mirzaishfaq

Member
#11
#11
AndreyPopov said:
if you have different view for desktop and mobile ( no matter "who" make this) then you must Enable "Separate View for Mobile Devices"!



yes!!! you MUST Enable "Separate View for Mobile Devices" if you use Journal.






this is WRONG way use third party extension!
because Safari browser support webp images format only from version 15th and that's why you would have problems (no images) on many Apple devices.

Journal3 itself convert all images jpg/png to webp format (if you system have needed libraries) and provide webp images for Chrome/Firefox/Opera and jpg/png for Safari





lines contain help:
Code: 
## Uncomment the following directives if you has a separate mobile view
and
Code: 
## Uncomment the following directives if you has a separate Safari browser view
"Uncomment" is delete ## at line begin


uncomments all commented lines except comments(help) lines :)


my (personal) .htaccess rules for LSCache
Code: 
### LITESPEED_CACHE_START - Do not remove this line
<IfModule LiteSpeed>
CacheLookup on
## Uncomment the following directives if you has a separate mobile view
RewriteEngine On
## Uncomment the following directives if you has a separate Safari browser view
RewriteCond %{HTTP_USER_AGENT} "bot|compatible|images|cfnetwork|favicon|facebook|crawler|spider|addthis" [NC]
RewriteCond %{HTTP_USER_AGENT} !Chrome [NC]
RewriteCond %{HTTP_USER_AGENT} !Mobile [NC]
RewriteCond %{HTTP_USER_AGENT} !Macintosh [NC]
RewriteRule .* - [E=Cache-Control:vary=isBot]
RewriteCond %{HTTP_USER_AGENT} Bot [NC]
RewriteCond %{HTTP_USER_AGENT} Android [NC]
RewriteCond %{HTTP_USER_AGENT} Chrome [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobilebot]
RewriteCond %{HTTP_USER_AGENT} Macintosh [NC]
RewriteRule .* - [E=Cache-Control:vary=isMac]
RewriteCond %{HTTP_USER_AGENT} "iPhone|iPad|Petal" [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobileapple]
RewriteCond %{HTTP_USER_AGENT} Android [NC]
RewriteCond %{HTTP_USER_AGENT} "Chrome|Firefox|Opera|OPR" [NC]
RewriteCond %{HTTP_USER_AGENT} !Bot [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]
</IfModule>
### LITESPEED_CACHE_END
Click to expand...
with your recommended setting I was able to fix the problem. Thank you for your help.
 
You must log in or register to reply here.
Top