4

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?

2 Answers 2

3

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 )
    }
})
1
  • Ha! Now that you've said it, it seems like the obvious solution. Which is the best kind of solution. Thanks!
    – Aidan
    May 31, 2017 at 7:19
0

You can also use lightning:flexipageRegionInfo

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.