How does my App look on a specific device?

,

In AppSheet Editor, we can change between preview in mobile, tablet, or full screen.
image

But this is not exactly how it looks on your device.
Let’s say you use one or two device models in your business.
If you like for example, a table view to show all the columns without truncating, you have to test it on your one or two devices.
The good news: You can do this with your PC and Google Chrome :slight_smile:

  • Open the Full Screen Mode of your App
  • Open the DevTools: press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)
  • Click on “Toggle Device Toolbarimage

Now you can play around with different models.
You can also add your own model.
To do so, look up the Viewport for your device. I found 2 websites:
Responsive Checker
Device Atlas
But I found it more accurate, to find the right Viewport by testing out.
So for my Huawei Mate 20 it’s not 360 x 780, but 377 x 683.

You can do also:

Rotate to landscape orientation.

Show device frame

Throttle the Network or the CPU
image

Override geolocation
image

For more Information

9 Likes

@Fabian this is an awesome tip bud, thanks for sharing it. Very much appreciated :pray:

2 Likes

Very Useful!! Thanks Fabian!

2 Likes