手机上的CSS全屏幕，居中桌面

Question

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

基本上我需要一个单一的视图容器，将集中在桌面上，并根据视口调整大小，但填写手机屏幕。下面的图片显示了我想要的：

据我可以看到常见的解决方案是媒体查询，但这些似乎有点棘手，我想要什么。特别是因为我不是特别关心分辨率，而是关于屏幕尺寸。几乎任何智能手机都有足够的分辨率来适应我想要的一切。可能是一个理想的解决方案将只是询问设备，如果是台式机或大于8" 的屏幕上运行。但据我知道，能不能做到。

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来完成。