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.
<divid="reportContainer"style="width:100%;height:610px"
aria-atomic="True"aria-multiline="True"
aria-multiselectable="True"aria-orientation="vertical"></div>
<scriptsrc="~/Scripts/powerbi.js"></script><scriptsrc="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 elementvar 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>