Viewport/Client Width in a Lightning App

Question

I'm working on a Lightning App that we want to display properly on mobile, but I'm having trouble with the viewport width when using a mobile device.

Here's my proof-of-problem app:

<aura:application extends="force:slds">
    <div style="background: grey">
        foo
    </div>
</aura:application>

If I view that on a desktop browser window of width 1200, and check document.documentElement.clientWidth in the javascript console, then I get the result 1200. As expected. Then, resize that window to 375px, and try again: I still get document.documentElement.clientWidth at 375px.

Then, tell Chrome to simulate an iPhone 6. This makes the actual window 375px, but document.documentElement.clientWidth reports 980px.

I found some old discussion of this, saying the problem is the viewport settings and suggesting the use of JS to inject the following header:

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

Obviously, we can't really inject things like that with Locker Service.

Anything I try to do with responsive layouts on mobile is going to be ineffective if Lightning forces the viewport to be at least 980px.

Any ideas?

Answer 1

I was able to reproduce the clientWidth issue using chrome simulator as described in the question.

So I tried adding the meta tag to the Lightning app directly and logged the clientWidth and it is properly returning the width based on the viewport when tested with the chrome simulator.

myApp.app:

<aura:application extends="force:slds">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <div style="background: grey">
        foo
    </div>
    <button type="button" class="slds-button slds-button--brand" onclick="{!c.logwidth}">logwidth</button>

</aura:application>

myAppController.js

({
    logwidth : function(cmp, event, helper) {
        console.log(document.documentElement.clientWidth )
    }
})

Answer 2

You can also use lightning:flexipageRegionInfo

Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo