媒体查询无效

Question

这是代码：

<style>

h1 {
  color: #007fed;
  position: fixed;
  font-weight: 200;
  text-align: center;
  top: 73%;
  width: 100%;
}



body {
    background: url(../dist/img/bg.jpg) center center no-repeat fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
        body {
            overflow: scroll !important;
            background: 0 !important;
            background-color: #ccc !important;
        }

}

@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
        body {
            overflow: scroll !important;
            background: 0 !important;
            background-color: #ccc !important;
        }

}

@media screen
  and (device-width: 320px)
  and (device-height: 480px)
  and (-webkit-device-pixel-ratio: 3) {
        body {
            overflow: scroll !important;
            background: 0 !important;
            background-color: #ccc !important;
        }

}

@media screen
  and (device-width: 768px)
  and (device-height: 1024px)
  and (-webkit-device-pixel-ratio: 1) {
        body {
            overflow: scroll !important;
            background: 0 !important;
            background-color: #ccc !important;
        }

}


</style>

在手机底部有一些空白区域，背景图像没有填满整个屏幕所以我只想在手机上删除它，也允许在手机上滚动，因为我不在桌面上，但那些媒体查询在多部手机和平板电脑上测试无效。