Mobile view is not being shown for embedded powerbi report

[gurpreet]

We have created a PowerBI report having both the desktop verion and mobile virson.

Its showing desktop and pone view properly when we are testing at following sample site after putting correct information. 

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

But when we open the website on mobile It is still showing the desktop version of the report.

File version used of powerbi.js file is 'powerbi-client v2.5.1'.

The HTML and javascript used is provided below

We are also appending '&isMobile=true' with embed report url.

Are we missing any reference to show the mobile version.

 <div id="reportContainer" style="width: 100%; height: 610px" 
                                  aria-atomic="True" aria-multiline="True" 
                                  aria-multiselectable="True" aria-orientation="vertical">
  </div>

  <script src="~/Scripts/powerbi.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <script>    $(document).ready(function() {    
      var txtAccessToken = "@Model.EmbedToken.Token";   
      var txtEmbedUrl = "@Html.Raw(Model.EmbedUrl)";
      var txtEmbedReportId = "@Model.Id";        
      var tokenType = $('input:radio[name=tokenType]:checked').val();
   
      var models = window['powerbi-client'].models;
  
      var permissions = models.Permissions.All;

      var config = {        
type: 'report',        
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,        
accessToken: txtAccessToken,        
embedUrl: txtEmbedUrl,        
id: txtEmbedReportId,        
permissions: permissions,        
settings: {          
layoutType: models.LayoutType.MobilePortrait
        }
      };

      // Get a reference to the embedded report HTML element
      var embedContainer = $('#reportContainer')[0];
      var report = powerbi.embed(embedContainer, config);      
report.off("loaded");

      // Report.on will add an event handler which prints to Log window.      
report.on("loaded", function() {
        Log.logText("Loaded");
      });      report.on("error", function(event) {
        Log.log(event.detail);        report.off("error");
      });      report.off("saved");      report.on("saved", function(event) {
        Log.log(event.detail);
        if (event.detail.saveAs) {
          Log.logText('In order to interact with the new report, 
                       create a new token and load the new report');
        }
      });
    });
  </script>

[v-jiascu-msft]

Hi @gurpreet,

The trick here is that every page needs a mobile view first. How to create a mobile view. Please refer to desktop-create-phone-report. The snapshot shows my test. We can see the difference clearly.

Best Regards,

Dale

[gurpreet · Accepted solution]

Thanks for the reply. 

Issue is resolved. I was appending isMobile=true in embededUrl property of configuration.

report.EmbedUrl = report.EmbedUrl + "&isMobile=true";

We need not to append "&isMobile=true" explicitly, this parameter will be updated in the iframe url automatically.

Thanks again for the help.