Lightning Locker Service & Viewport header

Question

Since LockerService, the solution to target Phones & Tablets with lightning , described in the following question, doesn't work anymore ( no more access to the main document headers ) How to target phones and tablets with media queries on a lightning app component?

Does anyone know how to manage the add of viewport in a lightning app with LockerService activated , to have the following info in the document ?

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

Thanks !

Answer 1

Two Options

1.-

If you are building a Community, You can Add it from

All Communities -> Builder -> Settings -> Advanced -> Edit Head Markup

2.-

If you are building a Standard Lightning APP, You can Add it from Javascript, but you dont need to use JQuery (I think is your problem).

In a Lightning App you have the following (App Component)

<aura:application template="c:test_empty_template">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <header class="tlf-header">
    <div class="tlf-header__top">
...

(App Controller)

({
            doInit : function(component, event, helper) {
                var meta = document.createElement("meta");
                meta.setAttribute("name", "viewport");
                meta.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
                document.getElementsByTagName('head')[0].appendChild(meta);

    }
})

And viewport is injected in the application Head