See screenshots in #1741498-41: Add a mobile preview bar to Drupal core. Note that both phones and tablets typically have device or browser chrome reducing the height available to the web page. This should be reflected in the preview. Perhaps adding some kind of pattern image overlay representing the chrome? With some devices, the height of the chrome can vary depending on software/settings, so we may need to pick what's most typical.
This would also be useful for the "Typical desktop" device, though that might be even more challenging to decide on what typical chrome height is.