5

I am trying to POC a very simple lightning component within a VF page, which is then displayed on a Force.com Sites. I am able to do this, but I need the component to "auto scale" to the correct size, depending on whether it's a desktop or a phone. I tried using SLDS for this, but it does not seem to be working correctly: on a phone, the page is very small. What do I need to do to accomplish this?

Code

Lightning App:

<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess"> 
    <aura:dependency resource="c:VFOut1"/>
</aura:application>

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">


    <div class="slds-form-element">
  <label class="slds-form-element__label" for="form-element-01">Form Label</label>
  <div class="slds-form-element__control">
    <input type="text" id="form-element-01" placeholder="Placeholder Text" class="slds-input" />
  </div>
</div>


</aura:component>

VF Page:

<apex:page showHeader="false" sidebar="false" lightningStylesheets="true" standardStylesheets="false">
    <apex:includeLightning />

    <div id="LcDisplayId"></div> 

 <script>
      // Here 'VfApp' Is Lightning Application Name
    $Lightning.use("c:VFOut1App", function() {

    $Lightning.createComponent("c:VFOut1",
    {},
   "LcDisplayId",
    function(component) {});
 });
 </script>
</apex:page>
  • CSS media queries won't work for you? @media only screen and (max-width: 47.9375em) { /* ... */ } – ytiq Jan 2 at 7:57
8
+200

Have you tried adding Viewport Meta Tag With width Or initial-scale in VF page as below.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit the mobile screens. Setting the viewport enables you to control the width and scaling of the viewport.

Your modified VF Page should look like this.

<apex:page showHeader="false" sidebar="false" lightningStylesheets="true" standardStylesheets="false">
    <apex:includeLightning />
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script>
        // Here 'VfApp' Is Lightning Application Name
        $Lightning.use("c:VFOut1App", function() {

            $Lightning.createComponent("c:VFOut1",
                                       {},
                                       "LcDisplayId",
                                       function(component) {});
        });
        </script>        
    </head>
    <body>
        <div id="LcDisplayId"></div>
    </body>
</apex:page>

I tested your code and it seems it will work with the Meta Tag as below.

Without Meta Tag

enter image description here

With Meta Tag

enter image description here

| improve this answer | |
  • @hamayoun Is it working for you? – Saroj Bera Jan 3 at 5:53
  • Yes, thank you! – hamayoun Jan 6 at 4:01

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.