How does my App look on a specific device?

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

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

  • 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 Toolbar3X_0_e_0e8ccfccee1f6b063558db0dbf36b41c246d981b.png

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
3X_2_6_26d9f64cb08db524af20b3fd89d05702e915d074.png

Override geolocation
3X_3_8_38f04b617678b94c5434f4e1a93c23fa01576222.png

For more Information

10 2 874
  • UX
2 REPLIES 2

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

Very Useful!! Thanks Fabian!

Top Labels in this Space