How to make UIStroke same thick on different screen sizes

[Blumaimn2 (Beans2)]

Hi Other Developers,

Not much of a UI designer so I’ve been running into this problem where UIStrokes are different Sizes on different screens

Here are some examples
Mobile:

PC:

Quite a bit difference, is there anyway to stop this from happening?
Thanks a lot!

[lilmazen1234 (MazenEz)]

Unfortunately, there isn’t an official way to make the UI Stroke fit on all devices, you could should make the icon in an external UI website and then export it to Roblox Studio as this would make the stroke fit on all screens, If you can’t though, then there is a hacky way using scripts to do it. Keep in mind this is a hacky way and could lead to some issues.

UIStrokeAdjuster - Properly scale your UIStrokes!

PROBLEM Simply…UISTROKES ARE THE PROBLEM! After its release, there have been many complications using UIStroke in projects. UIStrokes don’t properly scale relative to screen resolution (devices) nor relative to camera distance on BillboardGuis. To counter this issue, I created the “UIStrokeAdjuster” module! BEFORE UIStrokeAdjuster AFTER UIStrokeAdjuster SOLUTION Features Effectively uses CollectionService Automatically recursively tags ScreenGuis and BillboardGuis i…

[AnnoyingStatic]

You can create a script that automatically rescales the UIStroke’s thickness based on the user’s screen size.

local Camera = workspace.CurrentCamera
local UIStroke = Path.to.UIStroke

local DEFAULT_VIEWPORT = Vector2.new(1920, 1080) -- Since I always have my screen emulated to 1920x1080

function minimize(vector2: Vector2)
	return math.min(vector2.X, vector2.Y)
end

function CompareRatio(viewportSize: Vector2)
	return minimize(Camera.ViewportSize) / minimize(viewportSize)
end

-- The size of the screen when you created or adjusted the UIStroke thickness.
-- Viewport attribute incase you adjusted the thickness using different screen size. 
-- I recommend on just using the DEFAULT_VIEWPORT. 
-- Just emulate your studio's screen to that size.
local Viewport = UIStroke:GetAttribute("Viewport") or DEFAULT_VIEWPORT
local OriginalThickness = UIStroke.Thickness
UIStroke.Thickness = OriginalThickness * CompareRatio(Viewport )

-- You can add a camera viewport change listener and update the new thickness.

I recommend applying this system with CollectionService.