Hi,
I have created my PowerBi reports, I have created the mobile view on PowerBi desktop, I have then embedded the report in an iFrame on my website (with the reportId, GroupId etc.).
The report displays fine when viewing in a webpage. However if you resize the webpage, the report does not change its view to adjust to the screen, rather it zooms out and remains a rectangular report (jsut very very small).
If I just load the iFrame code into the browser and change the screen size, same issue.
I I load the report url from a mobile device, it also displays the same issues (see image).
If I load the report in app,powerbi and click mobile view it aligns correctly.
I have tried to read up on articles on how to correct but cant seen to find a solution. Can anyone assist?
The above image is an example of how the report displays on a mobile device. Am I setting some wrng parameters in the aspx code for the container or something?
<%@ Page Language="C#" AutoEventWireup="true" Async="true" CodeFile="mypage.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<META name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<META name="description" content="Syenap">
<META name="author" content="Syenap">
<script src="https://npmcdn.com/es6-promise@3.2.1"></script>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/powerbi.js"></script>
<style>
#reportContainer {
width: 100%;
height: 650px;
background-color: white;
padding: 0px;
clear: both;
}
.desktop-view iframe, .mobile-view iframe {
border: none;
}
</style>
<script>
$(document).ready(function () {
var accessToken = document.getElementById("<%= hdnAccessToken.ClientID %>").value;
var embedUrl = document.getElementById("<%= hdnEmbedUrl.ClientID %>").value;
var embedReportId = document.getElementById("<%= hdnEmbedReportId.ClientID %>").value;
var sectionName = document.getElementById("<%= hdnSectionName.ClientID %>").value;
var models = window['powerbi-client'].models;
//debugger
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
//pageView: "oneColumn",
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false,
localeSettings: {
language: "en-GB",
formatLocale: "en-GB"
}
}//,
//pageName: sectionName
};
var reportContainer = $('#reportContainer')[0];
var report = powerbi.embed(reportContainer, config);
});
</script>
</head>
<body style="vertical-align: top;position: relative;top: 0;">
<form id="form1" runat="server" style="vertical-align: top;position: relative;top: 0;">
<div style="vertical-align: top;">
<asp:HiddenField ID="hdnAccessToken" runat="server"></asp:HiddenField>
<asp:HiddenField ID="hdnEmbedUrl" runat="server"></asp:HiddenField>
<asp:HiddenField ID="hdnEmbedReportId" runat="server"></asp:HiddenField>
<asp:HiddenField ID="hdnSectionName" runat="server"></asp:HiddenField>
<div id="reportContainer" style="height:650px;width:100%;vertical-align: top;position: relative;top: 0;left:0;"></div>
<asp:Label Id ="lblMessage" runat="server" />
</div>
</form>
</body>
</html>
@duggy it will make sense to post this queston in "Developer" forum. Here is the link
Subscribe to the @PowerBIHowTo YT channel for an upcoming video on List and Record functions in Power Query!!
Learn Power BI and Fabric - subscribe to our YT channel - Click here: @PowerBIHowTo
If my solution proved useful, I'd be delighted to receive Kudos. When you put effort into asking a question, it's equally thoughtful to acknowledge and give Kudos to the individual who helped you solve the problem. It's a small gesture that shows appreciation and encouragement! ❤
Did I answer your question? Mark my post as a solution. Proud to be a Super User! Appreciate your Kudos 🙂
Feel free to email me with any of your BI needs.
Helpful resources
Power BI Monthly Update - July 2025
Check out the July 2025 Power BI update to learn about new features.
Join our Fabric User Panel
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Fabric Community Update - June 2025
Find out what's new and trending in the Fabric community.
