4

How to target phones and tablets on a Lightning component using media queries only?

I've been experimenting with media queries on lightning components and I was surprised with the results. Somehow on Iphones, Ipads and Galaxy phones, it always return the width as 980px making it impossible to target separately phones and tablets.

As an example, if you use the following style for your component, the only way to see your text blue would be re-sizing the browser window on a laptop or desktop but never on a phone or tablet.

.THIS {
    color:red;
}
@media screen and (max-width: 979px){ 
    .THIS {
        color:blue;
    }
}

The framework provides the $Browser global value and the device can be checked. To do that I assume I would have a method on my controller like:

({
    checkBrowser: function(component) {
        var device = $A.get("$Browser.formFactor");
        component.set("v.compClass", device);        
    }
})

And an attribute named compClass, type String on my component to catch the value.

<ltng:require afterScriptsLoaded = "{!c.checkBrowser}" />
<aura:attribute name="compClass" type="String"/>
<div class="{!v.compClass}"></div>

The problem with the controller approach is that unless I have an event been fired on re-size, it wouldn't change the attribute value when you re-size the computer browser screen.

Anyway, back to my question, how to target phones and tablets on lightning components using media queries only?

Improve this question
1

2 Answers 2

Reset to default
3

We figured out how to resolve this problem. Salesforce lightning apps don't have the viewport metatag on the <head>.

To resolve it we are injecting the viewport metatag to the <head> with javascript (JQuery) as we couldn't find a lightning option to manage the metatags.

This is not a perfect solution but it does the job. All you have to do is add the following code to your wrapper controller.

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

I hope this helps!!

Improve this answer
0

Answer from tier three agent: This is a simple CSS feature and should work as is. They are using max-width of desktop. To cover phone and tablet, they will need to add more lines for max-width of those devices; yes, they have to account for each device at a breaking point.

I don't think this is anything special to Lightning Component (but would be glad to hear that I am wrong to learn this).

Improve this answer
1
  • Unfortunately or fortunately as you said I believe you are wrong. Give a shot to example I posted on my question and you will see. It's a very unexpected behavior and it seems like that is no way around. If you believe I'm wrong, please provide a working example using only media queries to target phones, tablets, laptops and desktops individually. Keep in mind that this is not for Salesforce Platform 1. My application runs on myorgaddress/mynamespace/application.app .
    – Vinicius Santana
    Commented Sep 2, 2015 at 19:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .