Hello,
I am trying to set the aspect ratio for web page for 100% , but its out of the screen from my display scroll bars are coming because usually my aspect ratio config is 1080 px and it fitted properly on the tv app but when i trying to set the display fully on desktop while using precision this is happening , Like white screen is showing on all the end.when checking over it its 100% nd fitted properly but still scroll bar is not removed and white screen is coming.Please help me for this problem , Like how to remove scroll bar over here nd how to remove this white screen.
Hi Shruti, if you’re using Chrome you can simulate any Device ratio by clicking this icon in your Chrome devtools:
You can then either manually resize the window to fit the desired resolution by selecting “responsive” (i.e. 1920x1080). But I generally like to add 2 custom “TV devices” to the list (1920x1080 and 1280x720).
Hope that helps.
Michiel
See the problem is my app is running fine on tv which is of any size of tv i used globally set pixels but when I m running the same app on the web page like google etc then its out of display because of pixels .so i have used precision technique for setting webpage of that same tv app on my browser but when i did that then the page is set in the web page but white screen appeared and scroll bars too and what you have suggested i implemented that too , but nothing changed
, cureently my configuration for that app is , 1920*1080 ,Kindly give me some proper solution or idea for that so that i can
solve this problem.
Hi,
You can’t remove the white screen portion. TV’s are made to be 16x9 aspect ratio (1080p) and fit perfectly. Browsers are not 1080p (and your screen maybe, but your browser has a header for tabs and scrollbar, so its less). The best you can do is what is being suggested. Set the dimensions you want and change the zoom.
It’s a shame that Lightning doesn’t use percentages instead.
I previously created a WebGL/HTML hybrid Smart TV app using percentages, and it works much better for testing on various different devices.
It does - you can set stage precision to scale the app for different resolutions.
Thank you very much for the reply.
That definitely helps to address specific TV resolutions.
I was referring to something like this: https://codepen.io/Mangax/pen/rPPNzd … which is part of a L-Band style, TV app that I wrote about 5 years ago (I can only show the design layer due to NDAs).
Press F to toggle Fullscreen mode.
With that said, it was a combination of web canvas and HTML overlay (both the CSS and the Canvas elements were all set to percentages, or “em” for text, and would scale accordingly) – and that approach is probably far easier than scaling every canvas element. However, it’s also less performant than LightningJS’s approach.
Regardless, I wish LightningJS had been around back then. Then it wouldn’t have taken me close to 6 months of meeting with engineers from Samsung/LG, and countless hours of research and experimentation. 
(Side note: The background was originally dynamically generated, but for whatever reason was incompatible with the older LG models we used, so it had to be converted it to an image and imbedded using base64. It also helped, performance wise, that I rendered the animation at 640x480 and upscaled it.)