미디어 쿼리 문제

모바일 장치에 연결할 때 콘텐츠 비율을 비례 적으로 만드는 데 문제가 있습니다. 사이트가이 http://imgur.com/a/hhsIb (첫번째 이미지)처럼 보이는 바탕 화면미디어 쿼리 문제

에

나는 그것을 같이 (두 번째 이미지)을 보면

@media only screen and (max-width: 867px) { 
#header-wrap{ 
padding: 0px 0px 0px; 
max-height: 100%; 
} 

.right.nav { 
    float: none; 
} 
.nav{ 
} 
ul { 
display:inline-block; 
padding: 0px 10px 0px; 
min-width: 300px; 
} 
.left { 
float: none; 
} 
.logo{ 
margin:auto 

} 
}

을 만들 수있는 미디어 쿼리를 설정하지만 모바일 기기에서 볼 때 그것은 데스크톱처럼 보입니다. (세 번째 이미지)

나는 nav에서 이동이 오른쪽으로 부풀어 오도록 만들려고 노력합니다. 일단 쿼리를 치면 중앙으로 정렬되지만 나는 그렇게하는 법을 모릅니다. 고정 폭이 태그없이,

<html> 
    <head> 
    <title>Robert Fikes</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
    ... 
    </body> 
</html>

모바일 브라우저 웹 콘텐츠를 렌더링 :

여기에 당신은 문서의 <head> 섹션에 뷰포트 메타 태그를 추가해야 JS 바이올린 http://jsfiddle.net/u9shm5af/

출처

2014-12-04 Robbie Fikes

문서의 머리 부분에'viewport' 메타 요소를 포함해야합니다. 그렇지 않으면 미디어 쿼리가 작동하지 않습니다. 예 : '' –

입니다 응답 스타일이없는 이전 사이트는 잘리지 않습니다.

Safari Developer Library 가입일

도 3-10에 도시 된 바와 같이 웹 페이지의 대부분이, 세로 방향으로 980 픽셀로 설정 뷰포트 폭이 가시 영역에 훌륭하게 적합. iOS의 Safari가 뷰포트 너비를 980 픽셀로 설정하지 않은 경우 회색으로 표시된 웹 페이지의 왼쪽 상단 만 표시됩니다. 그러나이 기본값은 모든 웹 페이지에서 작동하지 않으므로 웹 페이지가 다른 경우 뷰포트 메타 태그를 사용하는 것이 좋습니다.

출처

2014-12-04 23:59:59 user2301192

감사합니다. –

미디어 쿼리 문제

답변

관련 문제