2016-06-07 66 views
-1

我正在使用iphone 5s的媒體查詢。但它不適用於移動設備。該網站的視圖保持不變。我正在使用媒體查詢這個website,你可以在那裏檢查它,並在你的iPhone設備也。iphone的媒體查詢不在magento中工作?

@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%; 
    } 
    } 
在我的瀏覽器

i am getting this on my browser 中的iPhone 5S i am getting this in my iphone

+1

您需要將導致問題的代碼發佈給您。 – Pushpendra

+0

我不知道問題的原因是什麼。媒體查詢正在工作,但視圖保持不變。看起來像寬度有問題。但我無法解決這個問題 –

+0

向我們展示您的媒體查詢。 _這裏。在你的問題中._你不能指望我們去查找你的源代碼並猜測你正在談論的代碼片段。 – Turnip

回答

0

因爲存在具有類包裝一個div有最大寬度,由於該網頁確實根據手機屏幕不配合,這是像素。我已將此更改爲百分比,並開始工作良好。