Lesson 01 of 05
Multi-Device Design
Desktop, mobile, tablet, console, TV. One UI. Zero compromise.
Roblox runs on PC, mobile, tablet, Xbox, and VR. Mobile players are the majority. Design mobile-first, then enhance for larger screens.
The core responsive stack
- UIScale — scale the entire GUI up/down based on viewport
- UDim2 Scale — relative sizing instead of fixed pixels
- UIAspectRatioConstraint — fixed proportions at any size
- UISizeConstraint — clamp min/max sizes
- Device detection — different layouts for mobile vs desktop
luau
1local cam = workspace.CurrentCamera
2local gui = script.Parent
3local scale = Instance.new('UIScale', gui)
4
5local function updateScale()
6 local vp = cam.ViewportSize
7 -- Reference: 900px tall = scale 1.0
8 -- Mobile (540px): ~0.6, Desktop (1080px): ~1.2
9 scale.Scale = math.clamp(vp.Y / 900, 0.55, 1.4)
10end
11
12cam:GetPropertyChangedSignal('ViewportSize'):Connect(updateScale)
13updateScale()
14
15-- Detect device type
16local UIS = game:GetService('UserInputService')
17local isMobile = UIS.TouchEnabled and not UIS.KeyboardEnabled
18local isConsole = UIS.GamepadEnabled and not UIS.KeyboardEnabled
19
20if isMobile then
21 -- Show larger touch targets, hide hover-only elements
22 gui.MobileLayout.Visible = true
23 gui.DesktopLayout.Visible = false
24else
25 gui.MobileLayout.Visible = false
26 gui.DesktopLayout.Visible = true
27end
READY · 27 lines