How does the Power BI Playground render the mobile view for their example report in the web browser?

[cdubbs]

I am looking for solutions to embed a mobile layout for my reports in a web browser, so customers can access them on their phones without having to use a mobile app. While looking for solutions, I am scratching my head looking at this example provided in the Power BI Playground:

https://playground.powerbi.com/en-us/explore-features

In the top right corner, a drop down menu is available to switch the desktop view to a mobile view. So my question here is, how is this mobile view being displayed in the browser?

Upon doing some research, it's my understanding that the property to display a mobile layout for a report is only available in Power BI mobile apps.

I have already tried using this code to render a mobile portrait view of my own report in a web browser (note: There does exist a mobile portait view for this report):

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

However, the report rendered in my browser is still the desktop layout. As I understand it, this line of code will only work for embeds in mobile apps, right?

I've seen some other solutions proposed by others, such as creating a seperate report with mobile dimensions to display in the browser, or perhaps using a custom layout instead.

However, revisiting the example provided by the Power BI Playground, I can't help but think: I can clearly see a mobile view displayed in my browser for their given report. So, what gives? If they can render a mobile view in the browser, it should be possible to achieve the same result using the API, right?

[apenaranda]

Sorry, I don't really understand what you're saying.
You say that the layoutType: models.LayoutType.MobilePortrait option only works for the power bi mobile application?
I mean, in my app that I have in Python, I can't do embedded and show the report in mobile design even if it is a PC? still forcing settings: layoutType: models.LayoutType.MobilePortrait
And then I don't quite understand what the alternative is, first I design the mobile report (from power bi desktop), then use javascript to verify resolutions, but the question is, how do I redirect to that page that I have designed? because the only way I understood was to use layouttype.mobileportrait and thus make that design embedded
thank you.

[lbendlin]

Embedding Power BI Mobile in another app (mobile or not) is not part of the design envelope.

[apenaranda]

Is it not possible to show the mobile design in another application other than Power Bi?

[Anonymous · Accepted solution]

HI @cdubbs,

As you said, the ‘layoutType’ property is used for power bi mobile app instead of used when acces from mobile web browser.
If you want to show the mobile layout when you view from mobile web browser, you can create a separate report specifically designed for mobile devices, with optimized visuals and layouts for smaller screens.

Optimize visual formatting for mobile layout - Power BI | Microsoft Learn
After these, you can embed this mobile report to your web application or website when users to access on their phones. (e.g. use JavaScript to check device resolutions and switch to that page)

Regards,

Xiaoxin Sheng