Mobile Condition

Configuration
1

Hi - Is it possible to only show a lovelace card on a mobile device and hide it on desktop?

Thanks.

2

You can create a dashboard for mobile and a dashboard for desktops.

The PITA is that you have to manually assign the dashboards as default on each mobile device.

The other option is using browser mod to detect the device and the state switch card to determine if the card should be displayed.

3

@tom_l Thank you!! I’ll check out browser mod

4

I’ve found a way that uses the HACS custom:button-card (which has now become my favorite display card), and it’s useful for showing different displays based on whether it is chrome or being Goggle Casted or whatnot.

First, on my floorplan or whatever component, I use a button like this (it shows normally on other dashboards and is used to cast to the kitchen but, as so shouldn’t show on the Kitchen Nest Hub or other casted devices):

  - type: custom:button-card
    entity: script.cast_to_kitchen
    template: dont_show_casted
    icon: mdi:alpha-k-circle
    tap_action:
      action: call-service
    style:
      top: 59%
      left: 47%
      transform: translate(-50%,-50%) scale(.7,.7)

This uses the “dont_show_casted” template, which I define with as:

 dont_show_casted:
    styles:
      card:
        - background-color: "rgba(255, 255, 255, 0.3)"
        - --iron-icon-stroke-color: "#969696"
        - border-radius: 50%
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - display: |
            [[[
              return hass.user.name == 'Home Assistant Cast' ? 'none': 'block' 
            ]]]
      icon:
        - width: 42px

(I’ve put in all the other display stuff as it’s really useful for getting nice-looking circular icons, but the key area is the JavaScript that’s executed on the display. This gets run as JavaScript that determines whether a css style tag should be display:none (e.g. hidden) or display:block (e.g. normal). If the current hass user is “Home Assistant Cast” then it sets display:none.

You should be able to put in your own JavaScript to detect if it’s Chrome or render things differently based on different users or if it’s mobile.

1 Like