Visualize dashboard on other screens

[Mark_Godfrey]

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?

[Bry]

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.

[josh]

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

@josh

Use the Device Toolbar in Chrome Developer Tools to simulate a device size

1. In Chrome on a laptop/desktop, press F12 to open Chrome Developer Tools
2. Select the icon in the toolbar to enable the device toolbar
3. Select a relevant device from the device toolbar to simulate that device’s screen

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.

@josh

One thing to keep in mind is that the effective device resolution is different than the physical resolution typically reported in device technical specs as most devices use some sort of scaling. The easiest way to figure this out is to go to https://whatismyresolution.com from your target device and it should show the effective resolution. In the case of the Fire HD 8 it’s 962x601.