手機上的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來完成。