Css IE在打开部署在服务器tomcat上的页面时并没有得到响应屏幕，但在部署之前使用IE在eclipse项目上运行时，它可以正常工作

我使用SpringMVC项目创建了一个应用程序。当我在eclipse中运行我的项目并尝试在IE上打开页面时，它工作正常，响应屏幕工作正常，但当我在服务器上部署它并在IE中打开页面时，响应屏幕不工作

我的css

/*  Small devices (tablets, 767px and DOWN)  */
@media all and( max-width : 400px ) { 
    @-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

    .item-thumb { height:70vmin;

    }
    .item-thumb img {
        height: 100%;
    }
    #logo img {
        width: 65%;
    }
    #order-btn {
        width: 70%;
        margin: 0 auto;
    }



}
/*  Small devices (tablets, 767px and DOWN)  */
@media all and ( min-width : 401px ) { 
    @-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
      .item-thumb { height:80vmin;
        width: 80%;
        margin: 0 auto;
    }
    .item-thumb img {
        height: 100%;
    }
    #logo img {
        width: 50%;
    }
    #order-btn {
        width: 50%;
        margin: 0 auto;
    }

}
/*  Small devices (tablets, 768px and up)  */
@media all and ( min-width : 761px ) { 
    @-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; } 
    .item-thumb { height:30vmax;

    }
    #logo img {
        width: 30%;
    }



}
/*  Medium devices (desktops, 992px and up)  */
@media all and ( min-width : 992px ) { 

     @-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
     .item-thumb { width:100%;
        height: 235px;
    }
    .item-thumb img {
        height: 25vmin;
    }
    #rs_order_sub_title p.right {
        text-align: right;
    }
    #rs_order_sub_title p.left {
        text-align: left;
    }
    .add_cart {
        padding: 10px;
        text-align: right;
    }
    #qty_frm {
        width: 100px;
        margin-left: auto;
        padding-right: 10px;
    }
    #order-btn {
        width: 40%;
        margin: 0 auto;
    }
    .center {
        width: 550px;
        margin: 0 auto;
    }
    #item_description p {
        width: 500px;
        margin: 0 auto;
        padding: 10px;
    }
    /* check out width */
    #check_out {
        width: 500px;
        margin: 0 auto;
    }
    #logo img {
        width: 20%;
    }
}
/*  Large devices (large desktops, 1200px and up)  */
@media all and( min-width : 1200px ) { 
    @-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
     .item-thumb { height:235px;

    }
    #logo img {
        width: 20%;
    }
}

我也在标题中添加了它的脚本

    <script type="text/javascript">
  //Copyright 2014-2015 Twitter, Inc.
  //Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
   document.createTextNode(
     '@-ms-viewport{width:auto!important}'
   )
  )
  document.querySelector('head').appendChild(msViewportStyle)
  }
    </script>

//版权所有2014-2015年推特公司。
//麻省理工学院授权(https://github.com/twbs/bootstrap/blob/master/LICENSE)
if（navigator.userAgent.match（/IEMobile\/10\.0/）{
var msViewportStyle=document.createElement（'style'））
msViewportStyle.appendChild(
document.createTextNode(
“@-ms视口{宽度：自动！重要}”
)
)
document.querySelector（'head'）.appendChild（msViewportStyle）
}

我还要补充一点

<meta name="viewport" content="width=device-width, initial-scale=1">

---

你能帮我吗？

我现在找到了解决办法。只需在jsp文件头中添加一个元标记：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" >