cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
harzicn
Kudo Collector
Kudo Collector

Preview emulation across different browser / device types

I am having trouble making sure my apps appear consistently across devices. I found that I built an app that looks fine on a large screen and on a smartphone and then discovered that radio buttons do not display satisfactorily on a Surface laptop. It would be great to be able to emulate different browsers and device screen-sizes in the preview rather than having to publish (and refresh and wait for the published version to appear). I understand one of the promoted benefits of PowerApps is its responsive design capabilities and so it would be fantastic to be able to check cross-browser displays during the design phase.
I have also been doing some work with SharePoint FX and very helpfully, the workbench provides emulation for different viewer types. Something similar in PowerApps would be great.
Thank you.

1 ACCEPTED SOLUTION

Accepted Solutions
Pstork1
Dual Super User III
Dual Super User III

Since you are building your app in a Web browser based design studio, this functionality is already built-in to many of the browsers on the market today using the developer tools in the Browser.  For example, in Chrome press [F12] to launch the Developer tools. Then click the icon to turn on the device toolbar.  From there you can emulate different devices or change the display dimensions.  screenshot.png



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

3 REPLIES 3
Pstork1
Dual Super User III
Dual Super User III

Since you are building your app in a Web browser based design studio, this functionality is already built-in to many of the browsers on the market today using the developer tools in the Browser.  For example, in Chrome press [F12] to launch the Developer tools. Then click the icon to turn on the device toolbar.  From there you can emulate different devices or change the display dimensions.  screenshot.png



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

Thanks of course that makes sense. I should have thought of that myself.

Pstork1
Dual Super User III
Dual Super User III

I should point out that if you are trying to do some of the responsive design calculations it isn't perfect.  For example, it won't pick up that you rotated the screen.  But otherwise its a great time saver.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza Winner Announcement

Please join us on Wednesday, July 21st at 8a PDT. We will be announcing the Winners of the Demo Extravaganza!

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Top Kudoed Authors
Users online (2,422)