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>
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.