Community Lightning App not responsive on devices though acts responsive on resizing PC's browser

Question

I have built a custom Lightning App with different multiple components and pages that I am using in my Salesforce Community. Now, when I 'decrease' the browser to a mobile size, it resizes and goes into our Mobile-friendly mode. However, when I open it on my phone it is NOT doing that Mobile-friendly responsiveness. Is this an issue that others have come across, is this community related? Or is there something I'm missing?

I have checked the META tag and I see that the below meta tag is rendered in the HTML Markup

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

I have no idea how do I change the above meta tab. But atleast when I change the tag using the Chrome's Developer Console (by connecting my mobile to my system and remote debugging) to the below, still nothing changes.

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

I need someone's serious help on this.

Answer 1

We had this same issue. What ended up working for us was putting <meta content="width=device-width, initial-scale=1.0" name="viewport" /> into the custom template we're using. So...if you're using a custom template that's a solution.

I also attempted to use JavaScript in Builder->Settings->Advanced->Edit Head Markup

<script>
    window.onload = function(){
        var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
        }
</script>