移动CSS全屏，以桌面为中心

Question

我正在为嵌入式设备创建Web用户界面，我想以网站的形式复制该用户界面。

基本上我需要一个单独的视图容器，它将在桌面上居中并根据视口调整大小，但填充移动屏幕。下图显示了我想要的内容：

据我所知，常见的解决方案是媒体查询，但这些对我想要的东西来说似乎有点棘手。特别是因为我并不特别关心分辨率，而是更多关于屏幕尺寸。几乎任何智能手机都有足够大的分辨率来满足我想要的一切。可能理想的解决方案就是询问设备是桌面还是在大于8＆＃34;的屏幕上运行。但据我所知，无法完成。

Answer 1

您可以使用

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

这会留下开放的垂直居中（你甚至想要吗？）或桌面设备的边距顶部，这应该通过包含min-width和/或min-height的媒体查询来完成