How to display Lovelace UI differently on mobile phone and tablet respectively?

Tags: #<Tag:0x00007f326ec8daf0>

Hi all,

I would like to display Lovelace UI on both mobile phone and tablet respectively.

However, I would like to have tablet version display slightly different due to its larger width screen size.

Is there any way I could set such a way?

FYI. TileBoard do have a similar method for achieving this TileBoard Mobile Configuration.


Look at the custom-compact-header card

How to use this component to achieve this objective?

Currently I am using it for my top bar.

As others have stated. use Compact Custom Header. This will allow you to specify views for a specific platform or user.

1 Like

I know it’s an old topic; bumped on it while searching for something.

Can this not be achieved simply by using different Lovelace Dashboards?
That’s at least how I’m doing it and then on that specific device assign that dashboard to it as default.

Can you explain me how to do that?

Can you share the code to achieve this result?

Thanks =)

Ciao Andrea, yes I can.

There is no code: the idea is just to create multiple dashboards and assign them to a specific device.

These are the steps:

  • in the HA UI go to ‘Configuration’ => ‘Lovelace Dashboards’ => 'Add dashboard (+ sign bottom-right)
  • a new window - the ‘Add new dashboard’ appears and you type a unique title (I have 1 called ‘tablet’)
  • after you provide a title and enter/tab to the next field, you will notice that this new title has been used as a URL
  • additionally you can choose to make it visible or not in the sidebar and admin only or not.

Now you have an extra dashboard and when you open it, you will get all the entities that you have used.
You can keep them and remove what you don’t need of you can delete them from this dashboard and start from scratch.
Of course you can copy cards over from another dashboard when you edit them or copy the yaml code to a new card, your choice.

I have installed the Custom header mod to tweak my dashboards, have a look at it if you don’t know it yet.

My experience with HA is fairly new and I’m not sure that this is the best way to accomplish this but it works for me (for now) so I’m happy that I have discovered this way.


Is there a new way to do that now when there’s no Custom Header anymore?
I know there’s already a built in user viability option which is great, but what about default view per a device?

You can config more “default” views and make them visible for different users (which means that each device should be a specific user)