css - 当打开部署在服务器 tomcat 上的页面时，IE 无法响应屏幕，但在部署前使用 IE 在 eclipse 元素上运行时它工作正常

Question

我使用 spring mvc 元素创建了一个应用程序。当我在 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>

任何方式我也添加

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

你能帮帮我吗？

Answer 1

我现在找到了解决方案。只需在 jsp 文件的头部添加一个元标记:

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