[mobile] Add meta viewport tag.

[nisarhassan12]

Hi!
This Pr addresses the following from #3557

The page is very zoomed in because there is no meta-tag controlling the viewport initials size (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

[jankeromnes]

Hi @nisarhassan12, many thanks for catching this! The missing viewport tag is likely a root cause for many of the strange zooming problems we see on mobile.

I will try to test this on my Pixel 3, and compare the UX with/without your fix. If this works as expected, it would be a big improvement for Theia's experience on mobile. 👍

[akosyakov]

btw we have similar settings on webviews copied from VS Code:

theia/packages/plugin-ext/src/main/browser/webview/pre/index.html

Lines 6 to 7 in fc49b2c

	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

maybe something useful as well

[vince-fugnitto]

@nisarhassan12 please be sure to accept the Eclipse Contributor Agreement (ECA) so that we can accept the contribution :)

[nisarhassan12]

@nisarhassan12 please be sure to accept the Eclipse Contributor Agreement (ECA) so that we can accept the contribution :)

Thanks @vince-fugnitto I have accepted the ECA 🙂 .

[vince-fugnitto]

@nisarhassan12 please be sure to accept the Eclipse Contributor Agreement (ECA) so that we can accept the contribution :)

Thanks @vince-fugnitto I have accepted the ECA .

I'll let @jankeromnes complete the review, I don't have an iPad (or large touch device) to test the pull-request against and I trust his judgement :)

[nisarhassan12]

I'll let @jankeromnes complete the review, I don't have an iPad (or large touch device) to test the pull-request against and I trust his judgement :)

Ok. Thanks! :)

[jankeromnes]

Super-cool fix, many thanks @nisarhassan12! 💯

I think this doesn't change the behavior on larger screens, but on smaller screens like smartphones this is a revolution -- Theia goes from broken to usable.

Also this is recommended by Lighthouse as a best practice.

Before

Theia starts out very un-zoomed, and as soon as you tap anywhere, the browser zooms you in a lot on a specific spot, and doesn't allow you to control zoom or pan around (probably because we cancel touchmove events). This is almost not usable.

Now

Theia starts at a comfortable zoom level, where you can read and control almost the entire IDE. I agree it looks a bit awkward because it's so narrow, but I can use this already. Now we'll "just" need to fix other small usability issues, like resizing panels on mobile, and we'll have a productive coding environment on smartphones.

[jankeromnes]

Also, thanks a lot @akosyakov and @vince-fugnitto for chiming in! 👍

[jankeromnes]

And of course congratulations @nisarhassan12 on your first commit in Theia! 🎉🥇