I have a web app with a 3D product configurator that is showing correctly on mobile, desktop, and larger devices.
Now I need to use the same react app, to run on a Tv screen showing the mobile view instead of the desktop view. This tv screen is a touch screen Samsung Flip 2 55" 4K (3840*2160) and will be in a physical store. The main website will serve a different page for the normal version of the configurator and another specific, limited access, page for the store, where will be loaded the same web app.
Right now I read a param from the url, that flag if the web app has to show the store version or the normal version. There are a few different in the functionality of the buttons, that are easy to implement depending on the flag, but my main problem is how to force the store version, to show always mobile view.
I thought that setting the meta viewport to a fixed size will solve the problem. While the flag isStore=1, I set
<meta name="viewport" content="width=767">
(I don't use the initial-scale otherwise I already get the normal view of the web app)
and with isStore=0 or not existing, I leave
<meta name="viewport" content="width=device-width, initial-scale=1"
and while I am debugging in ChromeDevTool I get the mobile view ( I use the WxH of the Tv Screen and get a zoom of 15%) and everything work as dreamed.
But when close the ChromeDev and get back to the full browser page, what I see is the desktop version of the web app.
Another solution that pops up in my mind was to use the @media query of the mobile for the store version, always depending on the isStore flag, we used styled-component, so is doable, but seems pretty long and not very smart.
I may be wrong in thinking that the meta viewport solutions works, I think I didn't really understand the scale attribute of the meta tag, nor the pixels, density, and double density, so it may be a total waste of time trying that way. Right now I didn't run it on any Tv screen, I am afraid as well that pics or texts can be visually bad.
Hope at least explanation make sense, didn't post any code 'cause is just a querySelector and a setAttribute
