728x90
Internet Exploer 6~8 버전 브라우저 문제 해결
respond.min.js 파일을 HTML 문서의 <head> 태그 부분에 다음과 같은 방식으로 삽입하면 Internet Exploer 6~8 버전 브라우저가 미디어쿼리 규칙을 해석할 수 있게 된다.
<!--[if lt IE 9]>
<script type="text/javascript" src="/respond.min.js"></script>
<![endif]-->
Internet Explorer 브라우저만 해석할 수 있는 조건부 주석을 사용했기 때문에 다른 표준 브라우저들은 이 코드를 무시하고 JS 파일을 요청하지 않는다. 조건부 주석에서 [if lt IE 9]의 의미는 '[if less than IE 9]'이다. 즉, Internet Exploer 9 미만의 브라우저에서만 해석하라는 의미이다.
낡은 모바일 브라우저 문제 해결
respond.min.js 파일이 미디어쿼리를 지원하지 않는 낡은 모바일 브라우저의 문제까지 해결해 주지는 못한다. 그러나 모바일 퍼스트 CSS 전략으로 이 문제를 해결할 수 있다.
모바일 퍼스트의 핵심은 낡은 모바일 브라우저가 미디어쿼리 구문을 해석하지 못하기 때문에 모바일을 위한 CSS 코드를 미디어쿼리 구문 밖에 작성하는 것이다. 모바일 퍼스트 코드 예제는 다음과 같이 작성할 수 있다.
|
1
2
3
4
5 |
/* 모바일용 CSS 코드를 여기에 작성 */@media all and (min-width:768px) {/* 모바일용이 아닌 CSS 코드를 여기에 작성 */} |
모바일용 CSS 코드가 미디어쿼리 밖에 작성됐기 때문에 모든 장치가 모바일용 CSS 코드를 해석한다. 모바일이 아닌 장치도 모바일용 코드를 해석하는 것은 문제가 되나 미디어쿼리 안쪽에 모바일이 아닌 장치를 위한 CSS가 거듭 선언되어 있기 때문에 모바일용 코드를 덮어쓰게 된다.
respweb.zip728x90
'프로그래밍 > 반응형 웹 디자인' 카테고리의 다른 글
| 반응형 웹디자인 네비게이션 패턴 (0) | 2013.04.10 |
|---|---|
| 반응형 웹 디자인 레이아웃 패턴 (0) | 2013.04.10 |
| Responsive Web Design (0) | 2013.04.10 |