|
자바스크립트(Javascript) 로 모바일웹을 표현할 때 해상도에 맞게 표현하기 |
|
개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2 |
모바일 페이지를 제작하고 화면을 보았을 때 해상도에 화면을 정확하게
맞추기 위해서는 메타태그와 몇가지 javascript 코드가 필요하다.
기본적으로 들어가는 메타태그는 다음과 같다.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=medium-dpi" />
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
다음은 각 스마트폰 사이즈에 맞게 구성이 되어야 하는데
그것을 맞추기 위해 적절할 javascript 가 필요하다. 그러니까
보고 있는 스마트폰의 해상도를 읽어와서 그에 맞게 표현하는 것이다.
일단 해상도를 가져오는 소스를 보자.
화면 색상의 bit, 해상도 가로, 해상도 세로를 가져오는 코드이다.
아래와 같이 나눠지는 이유는 브라우저 차이 때문이다.
소스에서 typeof( window.innerWidth ) == 'number' 브라우저를
구분하는 것을 알수있다.
Window.innerHeight/Width : 대부분의 브라우저에 가능하며 Explorer-8 이상은 안된다.
Document.body.clientHeight/Width : Internet Explorer 와 많은 브라우저가 지원한다.
Document.documentElement.clientHeight/Width : DOM 형태의 브라우저와 Internet Explorer
<script language="JavaScript">
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
</script>
각브라우저와 코드의 관계에 대한 표이다.
|
Browser |
window. innerHeight |
document.body. clientHeight |
document.documentElement. |
|
Opera 9.5+ strict |
window |
document |
window |
|
Opera 9.5+ quirks |
window |
window |
document |
|
Opera 7-9.2 |
window |
window |
document |
|
Opera 6 |
window |
window |
N/A |
|
Mozilla strict |
window |
document |
window |
|
Mozilla quirks |
window |
window |
document |
|
Newer KHTML |
window |
document |
window |
|
Older KHTML |
window |
document |
document |
|
Chrome/Safari 4+ |
window |
document |
window |
|
Safari 3- |
window |
document |
document |
|
iCab 3 |
window |
document |
document |
|
iCab 2 |
window |
window |
N/A |
|
IE 9+ strict |
window |
document |
window |
|
IE 6-8 strict |
N/A |
document |
window |
|
IE 5+ quirks |
N/A |
window |
0 |
|
IE 4 |
N/A |
window |
N/A |
|
ICEbrowser |
window |
window |
document |
|
Tkhtml Hv3 |
window |
window |
document |
|
Netscape 4 |
window |
N/A |
N/A |
그럼 위의 코드를 이용해 물리적인 해상도를 구해서 적용한다.
적용은 넓이만 하면 되므로 width 만 가져온다.
<script language="JavaScript">
<!--
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
// div 에 쌓여진 영역 화면 조정
Var deviceWidth = myWidth;
document.getElementById('divwidth').style.width = deviceWidth + "px";
//-->
</script>
<body>
<div id='divwidth'>
<H1>화면설정</H1>
</div>
</body>
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) 속도관계 변환, 시속, 분속, 초속, 피트, 노트 계산기 (0) | 2014.08.25 |
|---|---|
| 자바스크립트(Javascript) 입력된 문자열을 암호화 복호화 하기 (1) | 2014.08.24 |
| 크롬에서 자바스크립트(Javascript) 코딩하기 (2) | 2014.08.06 |
| Jquery 로 tab(탭) 구현하기 (5) | 2014.06.08 |
| Easy Slider 를 이용하여 이미지 슬라이더 구현하기 (2) | 2013.06.14 |
| javascript 개발을 위한 Visual Web Developer 2010 Express 설치 (0) | 2012.10.22 |
| Javascript 자바스크립트에서 배열사용하여 프로그램하기 (0) | 2012.09.19 |
| 자바스크립트를 개발하기 위한 에디터 종류 (1) | 2012.09.15 |
