user3082900 user3082900 - 1 year ago 144
CSS Question

CSS full screen on mobile, centerd on desktop

I am making a web user interface for an embedded device and I want to replicate that user interface in the form of a website.

Basically I need a single view container that will be centered on a desktop and resize according to the viewport, but fill a mobile screen. The image below shows what I want:

Example of what I want
As far as I can see the common solution are media queries but those seem a bit tricky for what I want. Especially since I don't particularly care about the resolution, but more about the screen size. Pretty much any smartphone will have a large enough resolution to fit everything that I want. Probably an ideal solution would be just to ask the device if it is desktop or running on a screen larger than 8". But as far as I know that can't be done.

Answer Source

You can use

html, body {
  width: 100%;
  height: 100%;
#main_wrapper {
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 800px;
  position: relative
  margin: 0 auto;

This leaves open vertical centering (do you even want that?) or a margin-top for desktop-devices, which should be done with a media-query that includes min-width and/or min-height.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download