아이폰/아이팟터치용 CSS제작
예전자료들/잡다한글들
2010. 9. 19. 10:12
아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px
입니다.
그러므로 CSS파일 2개를 제작해주셔야합니다.
하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후
가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로
다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다.
소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다.
위처럼 작성하시면 문제가 될것은 없습니다.
나머지는 여러분들의 몫 입니다.
입니다.
그러므로 CSS파일 2개를 제작해주셔야합니다.
하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후
가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로
다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다.
소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다.
<link rel="StyleSheet" href="세로모드CSS파일" type="text/css" media="screen" id="orient_css">
<!-- 위는 자바스크립트를 적용전 CSS파일(세로모드)를 불러와 가로모드일경우 바꿔주기 위한 아이디를 적용한 링크 태그 입니다. -->
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "세로모드CSS파일";
break;
case -90: document.getElementById("orient_css").href = "가로모드CSS파일";
break;
case 90: document.getElementById("orient_css").href = "가로모드CSS파일";
break;
}
}
window.onload = orient();
</script>
<!-- 위는 자바스크립트를 적용전 CSS파일(세로모드)를 불러와 가로모드일경우 바꿔주기 위한 아이디를 적용한 링크 태그 입니다. -->
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "세로모드CSS파일";
break;
case -90: document.getElementById("orient_css").href = "가로모드CSS파일";
break;
case 90: document.getElementById("orient_css").href = "가로모드CSS파일";
break;
}
}
window.onload = orient();
</script>
위처럼 작성하시면 문제가 될것은 없습니다.
나머지는 여러분들의 몫 입니다.
'예전자료들 > 잡다한글들' 카테고리의 다른 글
추석때 계획. (0) | 2010.09.20 |
---|---|
적분은쉽다. (0) | 2010.09.20 |
이노티아 (0) | 2010.09.19 |
어플설치 (0) | 2010.09.19 |
모바일사이트제작#3 (1) | 2010.09.19 |
모바일사이트제작#2 (0) | 2010.09.19 |
모바일사이트제작#1 (0) | 2010.09.19 |
수학강좌가 도움될지.. (0) | 2010.09.19 |
PHP의 특징 (0) | 2010.09.19 |
PHP의 이용범위 (0) | 2010.09.19 |
댓글