Sometimes in Magento 2, we have a scenario when a design for different devices is almost different and it gets impossible to make the required design layout using media queries.
So let’s check out this topic for that particular scenario.
How to setup separate themes for Desktop and Mobile in Magento 2
Step 1) Login into your admin section, and navigate to Content -> Design -> Configuration.
Step 2) Click on the edit of the store for which you would like to configure the theme.
Step 3) Click on Add New User Agent Rule under the Design Rule Section.
Step 4) Add the below string or specify a particular device name and then select your desired theme.
Add code for Tablet or Desktop
/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i
Select a theme for big screens it may be Desktop or Tablet specific devices.
Add code for Mobile
/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/
Select a theme for the Mobile specific device.
We can also add individual device names and select themes for that device iPhones can have a different theme and Android devices can have a different theme.
Hope you get the working of the User Agent Role to enable separate theme for mobile and desktop in Magento 2. Please free to comment if found any issues in this article or have any suggestions.
