Change theme automatically for mobile and desktop

1

Hi all,
I have 2 different themes for my website: one is for desktop, and one is for mobile. Now I want to switch them automatically based on users device. I’ve found [ Change theme dynamically](Change theme dynamically) but there is some code missing because there is no text after the final doublepoint :pensive:

Maybe anyone could share the full code how to switch themes based on users device?

Many thanks!

2

Maybe there was just no code behind the : in the mentioned post ? :grinning:
Anyway, I think it should be possible with the given hint.
Just try an event Hook like this which is fired just before the theme is rendered, as said.
refer to the Plugin Tutorial on how to act upon event occurrence.
at that point, you should evaluate which theme is currently in use and switch, if it is not the one you wish in case of mobile_detect == true.

3

Thanks @hoernerfranz for the info! Instead of this deep dive, I’ll create a separate subdomain m.mydomain.com and copy all the files to that place with a different theme by default. Nevertheless thanks for your support!

4

@Kai23, Maybe I’m overlooking something, but aren’t most themes responsive? Meaning they adapt to the window size of the mobile device or desktop…

What is the rationale for using two different themes?

5

@pamtbaau, sure, most templates are responsive. But you still have the same stuff, just displayed more nicely. With dedicated themes for mobile (and or tablet) and desktop you could also decide better about the size of the page. In many cases mobile has a slower network than desktops. Therefore e.g. in my blog overview I could display 10 latest entries on desktop but just 5 on mobiles.
Additionally I see that many sites have additional subdomains m.mydomain.com , probably due to the mobile-first trend.
My theme looks completely different on mobile and on desktop. On mobile it’s more like an app, with tab bar at the bottom. That does not make too much sense on desktops.

6

If anyone is interested: I’m now using JS Redirection Mobile Site. Just add the JS file to the js-path of your theme.

I then added this script in the head of base.html.twig of my desktop theme so it’s used on every desktop page:

<script src="/user/themes/mydesktoptheme/js/redirect.js"></script>
<script>
	SA.redirection_mobile ({
		mobile_prefix : "m",
		tablet_redirection : true,
		keep_path : true,
		keep_query : true
	});
</script>

The mobile prefix “m” is the subdomain of my mobile page. With keep path I could forward the user to the correct page. So if a smartphone user opens http://mydomain.com/folder/anypage he will be automatically forwarded to http://m.mydomain.com/folder/anypage :sunglasses::muscle:

1 Like
8

You might want to be sure that having the same (almost) content on 2 differents url will not affect your SEO.