css - 媒体查询不适用于 Blogspot

Question

我正在尝试在此处的 blogspot 上实现媒体查询 - http://cricketbeta.blogspot.in/

但是他们不工作，请看看并告诉我哪里错了

    @media screen and (max-width : 479px) {
/* If screen size less than 479px Load these styles */
/* Done for Smart Phones */
.content{width: 100%!important;}
.sidebar{display: none;}
.container{width:100%;
#topmenu{display: none}
}


@media screen and (min-width: 480px) and (max-width : 768px) {
/* If screen size less than 768px Load these styles */
/* Done for Tablets */
#middle .content{width: 100%!important;}
.sidebar{display: none;}
.container{width:100%;}
.header-bottom{width:100%}
}

@media screen and (min-width: 768px) and (max-width : 1024px) {
/* If screen size less than 960px Load these styles */
/* Done for Tablets */
.content{width: 100%!important;}
.sidebar{width: 100%;}
.container{width:100%;}
.header-bottom{width:100%}
}

Answer 1

我使用的媒体查询如下。看起来您可能遗漏了一些说明符。

苹果手机:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {

}

@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {

}

iPad:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (max-device-height: 1024px) and (orientation:portrait) {

}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:landscape) {

}