2016-06-07 8 views
-1

iphone 5s에 대한 미디어 쿼리를 사용하고 있습니다. 모바일 장치에서는 작동하지 않습니다. 사이트의 견해는 동일합니다. 이 website에 대한 미디어 쿼리를 사용하고 있습니다. 거기에서 확인할 수 있으며 아이폰 장치에서도 확인할 수 있습니다. 브라우저에서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 5 초 i am getting this in my iphone

+1

문제의 원인이되는 코드를 게시해야합니다. – Pushpendra

+0

나는 그 문제의 원인을 모른다. 미디어 쿼리가 작동하지만보기가 동일하게 유지됩니다. 너비에 문제가있는 것처럼 보입니다. 하지만이 문제를 해결할 수 없습니다. –

+0

미디어 쿼리를 표시하십시오. _이리. 귀하의 질문에 ._ 우리는 귀하의 출처를 검색하고 귀하가 말하는 코드를 추측 할 것이라고 기대할 수 없습니다. – Turnip

답변

0

되는 페이지가 모바일 화면에 따라하지 맞는을 수행하고 그것이 인해 클래스 래퍼를 갖는 사업부는 최대 폭을 가지고 있기 때문에 픽셀 단위. 이 비율을 백분율로 변경하면 모두 잘 작동합니다.

관련 문제