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 !

1 Answer 1


Two Options


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

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


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");


And viewport is injected in the application Head enter image description here

  • Updating Dom from js controller it strictly forbidden,it wouldn't pass isv security review. And headers must be at the top of the html, not in the middle of its body... Oct 19, 2017 at 5:34
  • Why you say is forbidden? You can move the function yo helper if you want. JavaScript is made for change the DOM and I cant find a reason for not to use Oct 19, 2017 at 6:24

You must log in to answer this question.

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