1. Drag the Device Detector element onto your page   (it is invisible - purely a utility element)

2. No fields to configure - detection is automatic

STATES:
  • device_type   → mobile / tablet / desktop
  • browser_name  → chrome / safari / firefox / edge /opera / samsung / uc / chrome-ios / firefox-ios / ie / unknown
  • os_name       → ios / android / windows / macos / linux / chromeos / unknown
  • is_mobile     → yes / no
  • is_tablet     → yes / no
  • is_desktop    → yes / no
  • screen_width  → current screen width in px
  • screen_height → current screen height in px
  • is_touch      → yes / no

HOW TO USE:
  • Show mobile UI:
    Condition: Device Detector's is_mobile = yes
    → Show mobile group

  • Show desktop sidebar:
    Condition: Device Detector's is_desktop = yes
    → Show sidebar group

  • Warn IE users:
    Condition: Device Detector's browser_name = ie
    → Show upgrade browser message

  • Screen size responsive logic:
    Condition: Device Detector's screen_width < 768
    → Switch to compact layout

Bubble editor link: https://bubble.io/page?id=mbbuilds5&test_plugin=1784027267662x527877641805758460_current&tab=Design&name=browser___device_detector&type=page&elements=bTGsu