Visualize dashboard on other screens

I am aware of using dev tools in chrome and have tried to emulate a 7" captive touch screen, but results have not been the same. Between a mix of regular 1x1 tiles and then labels, etc…, things get jumbled. What are you all doing to work with your dashboards on a laptop screen that may have different resolution and then also seeing on a 7" display in front of an rpi or such?

Resize the computer’s browser window to match where it is ultimately going to be displayed. Once you have enough icons on the dashboard, just keep an eye on the tablet while you resize your browser.


It looks like @Bry has you pointed in the right direction. The two most common approaches for designing for a specific device size are to:

  1. Adjust the width of your PC browser to roughly match the target device
  2. Use the Device Toolbar in Google Chrome to simulate the tablet exactly

Also keep in mind that if Chrome’s device emulator doesn’t already have your device listed, you would need to manually add it. And one thing that’s a bit tricky is that the effective screen resolution on many modern devices is often different than the resolution listed in their specs.