I have a lightning component which display contact records.
I have exposed the component has a lightning TAB in LEX.
The code is working as shown below.
 

Base.cmp
-------------

<aura:component abstract="true"
                extensible="true">
	{!v.body}
</aura:component>

BaseHelper.js
-------------
({
    callServer : function(component,method,attributeName,params) {
        var action = component.get(method);
        if (params) {
            action.setParams(params);
        }
       
        action.setCallback(this,function(response){
            var state = response.getState();
        	console.log('State log '+state);
            if(state === 'SUCCESS'){
                component.set(attributeName,response.getReturnValue());
            }
            else if(state === 'ERROR'){
		         console.log('Error '+response.getError());
	}
        });
        $A.enqueueAction(action);
    }
})


CallApexClassComponentBase.cmp
------------------------------
<aura:component implements="flexipage:availableForAllPageTypes,
                            force:appHostable"
                            extends="c:Base"
                            controller="ContactController">

        <!--Declare Attributes-->
    <aura:attribute name="wrapperList" 
                    type="Object"/>
    
    <lightning:card title="Bring Contact data">
        
        <aura:set attribute="actions">
            
            <lightning:button label="Contact Data" 
                              onclick="{!c.Condata}" />
        </aura:set> 
        
    </lightning:card>
    
    <!-- Here I need an header to display the number of contacts-->
    <div class="slds-p-around--large">
     
        <p style="color:red">Total Contacts = {!v.wrapperList.CountContacts}</p>
      
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <th scope="col">
                    <div class="slds-truncate" title="First Name">First Name</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="First Name">Last Name</div>
                </th>
                
                <th scope="col">
                    <div class="slds-truncate" title="First Name">Email</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="LeadSource">LeadSource</div>
                </th>
                
            </tr>
        </thead>
        <!--table body start, 
        Iterate contact list as a <tr> 
        -->
        <tbody>
            <aura:iteration items="{!v.wrapperList.lstContact}" 
                            var="con">
                
                <tr>
                    <th scope="row">
                        <div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!con.LeadSource}">{!con.LeadSource}</div>
                    </th>
                    
                </tr>
            </aura:iteration>
            
        </tbody>
        
    </table>
    </div>
</aura:component>


CallApexClassComponentBaseController.js
---------------------------------------
({
 Condata : function(component,event,helper) {
 helper.callServer(
            component, //component
            "c.getContacts", //method
            "v.wrapperList"   //attribute , this goes into helper
        );
    }
})


ContactController.apxc
----------------------
public with sharing class ContactController {
    @AuraEnabled
    public static wrapperClass getContacts() {
        //create an object of wrapper class
        wrapperClass wrapClass = new wrapperClass();
        
        wrapClass.lstContact=[select Id, FirstName,LastName,Email,LeadSource FROM Contact 
                              where Email != NULL
                              AND Account.Name != NULL 
                              AND LeadSource != NULL
                              ORDER BY NAME];
        
        //now size of the list
        wrapClass.CountContacts=wrapClass.lstContact.size();
        
        return wrapClass;
    }
      public class wrapperClass{
        @AuraEnabled public List<contact> lstContact{get;set;}
        @AuraEnabled public Integer CountContacts{get;set;}
       
    }
 }

My requirement is I want to display the output in mobile devices say IPhone 6s , galaxy s9.

Please le tme know how to proceed on this? Is there a way where we can make the lightning URL available in sites?

smita