我看到这个问题经常被问，我尝试了所有可能的方法，但我的自定义媒体查询是不工作的，它总是选择以下媒体查询，如果屏幕尺寸大于768px。

@media all and (min-width:768px){
//further code here
}

我尝试添加以下元标签，但没有找到运气。

<meta http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

我以以下方式写我的媒体查询

@media all and (min-width:768px){
//further code here
}
@media all and (min-width:768px) and (max-width:1024px){
//further code here
}
@media all and (min-width:1025px) and (max-width:1440px){
//Further code here
}
@media all and (min-width:1441px) and (max-width:2560px){
//Further Code here
}

//Working Code of Media Query for my Screen Size
@media all (max-width:1440px){
  .border-center{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:155px;
}
.searched-border-center{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:183px;
}
.mosquePage{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:183px;
}
#flipbook{
position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#flipbook1{
position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
  .compass_container {
    left: -34% !important;
    top: -34% !important;
    transform: scale(0.8) !important;
}
    
    .mainCompass{
        /*left:-45px; */
    }
    .compass__rose{
    height:250px !important;
    }
    .compass__pointer{
    height:250px !important;
        width:250px !important;
    }
    #qiblaDegree{
    margin-top:0px !important;
    }
}