iphone的媒体查询在magento中不起作用？

Question

我正在使用iphone 5s的媒体查询。但它不适用于移动设备。该网站的视图保持不变。我正在使用此website的媒体查询，您可以在那里以及您的iphone设备中查看它。

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
    .wrapper {
    min-width: auto;
    width: 100% ;
    float: left ;
    }
    .nav-container {
    background: url(../images/nav.png) no-repeat;
    height: auto;
    width: 100%;
    }
    .page{
    width: 92%;
    float:left;
    overflow:hidden;
    }
    .header,.header-container{
    width: 100% ;
    float:left ;
    }
   .header .logo {
    margin: 3% auto 0;
    width:100%;
    }
   .header .logo img {
    display: block;
    margin: 0 auto;
    width: 70%;
    }
    .quick-access {
    float: left;
    height: auto;
    padding: 2% 1%;
    width: 98%;
    }
    .header .welcome-msg {
    float: left;
    padding: 0 ;
    text-align: center;
    width: 100%;
    }
    .header .links {
    margin: 0 auto;
    padding: 4% 1%;
    width: 94%;
    }
    .header .links li {
    background: hsla(0, 0%, 0%, 0) url("../images/tsp.gif") no-repeat scroll 100% 8px;
    float: left;
    margin: 0 3% 0 0;
    padding: 2% 3% 2% 0;
    }
    .main-container {
    float: left;
    margin-top: 15%;
    padding: 5% 4%;
    width: 92%;
    }
    .main {
    float: left;
    width: 100%;
    }
    .col3-layout .col-wrapper {
    float: left;
    margin: 0;
    width: 99%;
    }
    }

在我的浏览器中 在iPhone 5s

Answer 1

因为有一个div，类包装器有max-width，因此页面根据移动屏幕不合适而且是像素。我已将此更改为百分比，并且一切正常。