html - 使我的移动 html 全屏

Question

所以我想在 webview (Android) 中显示这个网站，它工作正常，但我不知道为什么它没有全屏显示。我认为css一定有问题，但我找不到它。这是我在手机中看到的截图。我希望背景占据整个屏幕。这可能吗？

Answer 1

您的“default.css”中有一个填充。删除第 704 行。

@media all and (max-width: 960px){
    .center{
        width:auto;
    }
    ...
}

如果你想要一个全屏表格，你需要position: absolute在height: 100%我们的.tablatop.

.tablatop { //remember to put this style rule in your respective @media-query!!!
    position: absolute;
    height: 100%;
}

Answer 2

div（在媒体查询中）有填充（padding: 0 10px;），这就是它占用空间的原因，删除它

@media (max-width: 960px)
.center {
padding: 0; 
width: auto;
}

检查屏幕截图

Answer 3

不确定webview，但试试这个：

body,html{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    /*optional but incase it still doesn't work.*/
    min-width:100%;
    min-height:100%;
    /*further optional still incase elements case overflows*/
    max-width:100%;
    max-height:100;
    overflow:scroll;/*or hidden*/

要进一步定位此设备，请使用如下媒体查询：

@media only screen and(max-device-width:(deviceWidthHere))and(max-device-height:(deviceHeightHere)){
    /*CSS here*/
    /*second 'and' clause is not necessarily necessary. lol*/
}