모바일 페이지 작성시 가로,세로 모드에 따라 다른 css 파일 적용시키기
쓸만한지식 2011. 10. 24. 16:27
모바일 웹페이지 작성시 가로로 볼때와 세로로 볼때 처럼 보여지는 방향에 따라 문서에 다른 css 파일을 적용시키고 싶은 경우가 있다.
고럴때는 다음과 같이 처리하면 깔쌈하게 해결이 가능하다.
※ 아이패드2와 안드로이드폰에서 테스트 해봤는데 훅훅 화면이 돌아갈때 마다 다른 css 파일로 적용이 잘된다.
※ pc 에서 해당 페이지를 로딩할 경우 기본적으로 가로모드 css 파일이 적용된다.
portrait.css
landscape.css
고럴때는 다음과 같이 처리하면 깔쌈하게 해결이 가능하다.
※ 아이패드2와 안드로이드폰에서 테스트 해봤는데 훅훅 화면이 돌아갈때 마다 다른 css 파일로 적용이 잘된다.
※ pc 에서 해당 페이지를 로딩할 경우 기본적으로 가로모드 css 파일이 적용된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS Orientation Test</title> <!-- 세로모드일때 적용될 CSS --> <link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css" /> <!-- 가로모드일때 적용될 CSS --> <link rel="stylesheet" media="all and (orientation: landscape)" href="landscape.css" /></head><body> <p>방향 테스트</p> <div id="cont"> 가가가가가가가가가가가가가가가가가 나나나나나나나나나나나나나나나나나 </div></body></html> |
portrait.css
1 2 3 | body{background-color: black;}p{font-size: 20pt;color: white;}#cont{width:900px;border:1px solid #ddd;} |
landscape.css
1 2 3 | body{background-color: red;}p{font-size: 20pt;}#cont{width:200px;border:1px solid #ccc;} |
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingLink v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/07 - [쓸만한지식] - [팁] 윈도우7 에서 특수문자 입력을 쪼금더 편리하게~
2011/09/27 - [Javascript] - jQuery ajax 로 로딩되는 페이지에 있는 자바스크립트가 실행이 안될때(모바일웹)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/09/02 - [쓸만한지식] - Firefox User-agent 변경하기
2011/08/08 - [이클립] - Eclipse Javascript Code Assist 가 되지 않을때
2011/11/07 - [쓸만한지식] - [팁] 윈도우7 에서 특수문자 입력을 쪼금더 편리하게~
2011/09/27 - [Javascript] - jQuery ajax 로 로딩되는 페이지에 있는 자바스크립트가 실행이 안될때(모바일웹)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/09/02 - [쓸만한지식] - Firefox User-agent 변경하기
2011/08/08 - [이클립] - Eclipse Javascript Code Assist 가 되지 않을때
'쓸만한지식' 카테고리의 다른 글
| Windows 커맨드창 안띄우고 스크립트 실행하기 (0) | 2011.10.27 |
|---|---|
| 크롬 최신버전 15.0.874.102 for Chrome Stable 다운로드 직링크(11.10.27) (0) | 2011.10.27 |
| 네이버에서 제공해주는 PPT, DOC, HWP 서식(Template) 받자~ (1) | 2011.10.24 |
| Windows 심볼릭링크 맨들기 (0) | 2011.10.12 |
| 11번가 바로가기 링크 (2) | 2011.10.11 |
