Best CSS practices for a low-res LED Wall (192x288px)?
✅solved
front-end
front-endHi everyone! 
I’m working on a project where I need to display a web page on a large outdoor LED screen. It’s a bit of a unique challenge because of the hardware specs.
The screen is physically large (960mm x 1440mm), but it has a 5mm pixel pitch. This means my actual viewport resolution is tiny: only 192px wide by 288px high.
I’m running this through Novastar ViPlex software (which I believe uses an Android-based WebView), and I’m running into some layout issues.
I’d love to get your advice on a few things:
- Layout: Should I hardcode the body width to 192px, or is it safer to just use 100vw / 100vh to avoid weird margins?
- Crispness: Since the resolution is so low, text and borders can look blurry. Should I be globally applying image-rendering: pixelated or specific font-smoothing settings to keep edges sharp?
- Scaling: Is it better to code everything in px at this small scale, or should I design at a higher resolution (like double size) and use CSS transform: scale() to fit it down?
Any tips from anyone who has designed for low-res digital signage before would be super helpful!
Thanks in advance!
PS: I’ve attached a photo of how the screen currently looks for reference.
I’m working on a project where I need to display a web page on a large outdoor LED screen. It’s a bit of a unique challenge because of the hardware specs.
The screen is physically large (960mm x 1440mm), but it has a 5mm pixel pitch. This means my actual viewport resolution is tiny: only 192px wide by 288px high.
I’m running this through Novastar ViPlex software (which I believe uses an Android-based WebView), and I’m running into some layout issues.
I’d love to get your advice on a few things:
- Layout: Should I hardcode the body width to 192px, or is it safer to just use 100vw / 100vh to avoid weird margins?
- Crispness: Since the resolution is so low, text and borders can look blurry. Should I be globally applying image-rendering: pixelated or specific font-smoothing settings to keep edges sharp?
- Scaling: Is it better to code everything in px at this small scale, or should I design at a higher resolution (like double size) and use CSS transform: scale() to fit it down?
Any tips from anyone who has designed for low-res digital signage before would be super helpful!
Thanks in advance!
PS: I’ve attached a photo of how the screen currently looks for reference.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
