모바일 페이지 작성시 가로,세로 모드에 따라 다른 css 파일 적용시키기

쓸만한지식 2011. 10. 24. 16:27
모바일 웹페이지 작성시 가로로 볼때와 세로로 볼때 처럼 보여지는 방향에 따라 문서에 다른 css 파일을 적용시키고 싶은 경우가 있다.

고럴때는 다음과 같이 처리하면 깔쌈하게 해결이 가능하다.



※ 아이패드2와 안드로이드폰에서 테스트 해봤는데 훅훅 화면이 돌아갈때 마다 다른 css 파일로 적용이 잘된다. 
※ pc 에서 해당 페이지를 로딩할 경우 기본적으로  가로모드 css 파일이 적용된다.


<!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 
body{background-color: black;}
p{font-size: 20pt;color: white;}
#cont{width:900px;border:1px solid #ddd;}


landscape.css 
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 가 되지 않을때


저작자표시 비영리 변경금지

'쓸만한지식' 카테고리의 다른 글

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
Posted by 스토브
openclose

티스토리툴바