Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

자바스크립트(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.
clientHeight

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>
반응형
Posted by 녹두장군1
,