MobilePortrait layout renders differently in JavaScript SDK embed vs Power BI Service

[rafaelmpsantos]

I'm experiencing a significant rendering difference when embedding a report using layoutType: models.LayoutType.MobilePortrait via the Power BI JavaScript SDK compared to how the same mobile layout appears in the Power BI Service (powerbi.com mobile preview).

Environment:

• powerbi-client SDK version: 2.23.1
• Browser: Chrome/Edge (latest)
• Embed type: App Owns Data (Embed Token)

Issue:
When I view the mobile layout in the Power BI Service (Edit mode > Mobile Layout preview), everything renders correctly:

• Button slicers display in a 3×2 grid (Receitas, Custos, Despesas / Encargos, Resultados, Provisões)
• Matrix/table shows all columns (Descrição, jan/2024, fev/2024)
• Content is properly scaled and fits the viewport

However, when embedding with the SDK using MobilePortrait, the same report renders broken:

• Button slicers are forced into a single horizontal row with truncated text (e.g., "Rec ei...", "Cus to...")
• Table/matrix only shows the "Descrição" column, numeric columns are cut off
• Content appears zoomed in / oversized regardless of container width

What I've tried (none resolved the issue):

1. Container widths from 280px to 100% viewport
2. customLayout: { displayOption: models.DisplayOption.FitToWidth }
3. customLayout: { displayOption: models.DisplayOption.FitToPage }
4. Adding &isMobile=true to the embed URL
5. Meta viewport tag with proper mobile settings
6. Various combinations of hiding/showing panes and status bar

Expected behavior:
The SDK should render the mobile layout identically to how it appears in the Power BI Service mobile preview — with visuals properly scaled and wrapped within the canvas width.

Actual behavior:
The SDK seems to render the mobile visuals directly into the container without applying the same internal scaling/canvas logic that the Power BI Service uses. This causes visuals designed for mobile (especially button slicers and tables) to overflow and truncate.

Question:
Is there a configuration or workaround to make the JavaScript SDK MobilePortrait embed render exactly like the Power BI Service mobile preview? Is this a known limitation of the SDK?

[v-saisrao-msft]

Hi @rafaelmpsantos,

From the screenshots and the behavior you're seeing, this seems more tied to how the report renders in the embedded mobile experience than to the embed configuration itself. The layoutType: models.LayoutType.MobilePortrait setting loads the report's mobile layout, but visuals like button slicers, tables, and matrices can still behave differently when embedded, which can lead to truncated text, clipped columns, or scaling differences.

Since you've already tested container sizing, FitToWidth, FitToPage, isMobile=true, and the viewport settings, you've covered most of the common configuration options. As a next step, I'd recommend trying the latest powerbi-client SDK version to see whether there are any rendering improvements.

If the behavior stays the same, it may be worth validating the report specifically in the embedded scenario and adjusting the mobile layout where needed. For example, responsive visuals or dropdown slicers may work better than button-grid slicers, and wide matrix/table layouts may need to be simplified for smaller screens.
Best practices for creating mobile-optimized Power BI reports - Power BI | Microsoft Learn

Optimize visual formatting for mobile layout - Power BI | Microsoft Learn

Embedding a Power BI report with mobile layout in Power BI embedded analytics | Microsoft Learn

Thank you.

[rafaelmpsantos]

I'm using the latest version of the powerbi-client SDK. I noticed that this issue happens when the PBIR model is enabled, so it seems to be a PBIR limitation.

When I try to run JavaScript to validate whether the page has a Mobile Layout, the result is not returning true.

[v-saisrao-msft]

Hi @rafaelmpsantos,

Thanks for the update. Since you're already on the latest powerbi-client SDK, you can use page.hasLayout(models.LayoutType.MobilePortrait) to determine whether the page includes a Mobile Portrait layout. The documentation says this method returns a boolean that indicates whether the page has the specified layout. Microsoft also notes that if a page doesn't have a Mobile Portrait layout, it will be loaded with the MobileLandscape layout.

Embedding a Power BI report with mobile layout in Power BI embedded analytics | Microsoft Learn

Thank you.

[rafaelmpsantos]

The method page.hasLayout(models.LayoutType.MobilePortrait)  does not works in PBIR reports. It's a bug.

[v-saisrao-msft]

Hi @rafaelmpsantos,

Thank you for the update. Since you've reproduced the behavior and believe this is a bug specific to PBIR reports, I'd recommend raising a Microsoft Support ticket.
Create a Fabric and Power BI Support Ticket - Power BI | Microsoft Learn

Thank you.