body max-height; aspect-ratio; zoom

Question

I have written a beautifully responsive c#-MVC web application designed for laptops (the compilation and alpha test environment); however, after deploying, it does not appear correctly on android devices. The text is tiny when devices are flipped in portrait. I have invested about a day into hacking together a semi-aesthetic vertically responsive design for Android when I had what is hopefully an epiphany. Is it possible to set the max-height of the body and auto-zoom the page? Does anybody have experience with this idea who can guide me? I would just do it and test, but doing so requires me to really commit and revert to a previous version, then re-migrate from Xamarin to VS (if it's possible then it's the easiest way, otherwise it is a huge time investment). The target device is Samsung S4, so I can use any viewport or zoom solutions it supports.

NOTE: I will keep this question open in case somebody comes up with another answer, as this solution can potentially help a lot of developers. The solution that worked for me was:

Place a Viewport meta tag in the _Layout.cshtml page:

<meta name="viewport" content="initial-scale=1">

Next, in the javascript file, put (these should be combined, but I'm showing them one at a time for descriptive purposes):

document.getElementById("viewport").setAttribute("content", "height=600");
document.getElementById("viewport").setAttribute("content", "device-width=800");

Adjust paramters as desired.

Answer 1

I believe you are missing the width attribute in your meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

To disable zooming (may be necessary depending on the application):

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

In addition to that, how are you setting your font sizes? Only set a pixel value on the body tag, without setting this, the browser will use a device default, usually ~16px for desktop.

With a base font weight set, utilize EMs to size the other elements relative to the body font size. This makes it very easy to change base font for smaller screens with a media query. Such as:

@media (max-width: 400px) {
    body {
       font-size: 14px
    }
}