모바일 WEB 관련/HTML52011. 1. 8. 01:52

[Canvas] canvas 3. getContext

캔바스는 여러가지  랜더링이 존재하는데 그중에 우리는 현재 정의가 어느정도 된 2D랜더링 부분에 대해서 집중하고자 합니다.

물론 차후에는 좀더 다양한 종류의 렌더링이 지원될것인데, 예를들면 OpenGL 에 기반한 3D컨텍스트 등이 준비중입니다.


canvas는 기본적으로 비어있는데 이를 사용하기 위해서 우리는 스크립트로 canvas에 접근할 필요성이 있습니다.

canvas엘리먼트에는 그림그리는데 필요한 기능을 가진 getContext 라는 DOM 메소드가 존재합니다.

  1. var canvas = document.getElementById('tutorial');  
  2. var ctx = canvas.getContext('2d');  

위의 예제에서 우리는 tutorial 이라는 id를 가진 canvas 를 DOM 노드를 이용해 접근하였고 

해당객체에서 getContext 메쏘드를이용해 2d 컨텍스트에 접근하였습니다.


지원확인

  1. var canvas = document.getElementById('tutorial');  
  2. if (canvas.getContext){  
  3.   var ctx = canvas.getContext('2d');  
  4.   // drawing code here  
  5. } else {  
  6.   // canvas-unsupported code here  
  7. }  

getContext 메쏘드를 확인하는것으로 간단하게 현재 브라우저가 지원하는 지 아닌지 여부를 판단할수있습니다.

간단 템플릿

  1. <html>  
  2.   <head>  
  3.     <title>Canvas tutorial</title>  
  4.     <script type="text/javascript">  
  5.       function draw(){  
  6.         var canvas = document.getElementById('tutorial');  
  7.         if (canvas.getContext){  
  8.           var ctx = canvas.getContext('2d');  
  9.         }  
  10.       }  
  11.     </script>  
  12.     <style type="text/css">  
  13.       canvas { border: 1px solid black; }  
  14.     </style>  
  15.   </head>  
  16.   <body onload="draw();">  
  17.     <canvas id="tutorial" width="150" height="150"></canvas>  
  18.   </body>  
  19. </html> 

미리보기

위의 코드를 실행해보면 간단한 박스가 나타나는것을 볼수있습니다.

캔버스를 사용하는 뼈대라고 볼수 있습니다. 캔버스를 생성하고. 스크립트로 컨텍스트를 받아왔으며, 간단한

스타일시트로 스타일도 주었습니다. 

앞으로 사용하게될 많은 캔버스들이 이 기본구조를 크게 벗어나지는 않을것입니다.

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

'모바일 WEB 관련 > HTML5' 카테고리의 다른 글

[Canvas] canvas 6. path도형 그리기  (0) 2011.01.08
[Canvas] canvas 5. 도형 그리기  (0) 2011.01.08
[Canvas] canvas 4. 간단한예제  (0) 2011.01.08
[Canvas] canvas 2. 기본사용법.  (2) 2011.01.08
[Canvas] canvas 1. 소개  (0) 2011.01.08
Posted by windship
모바일 WEB 관련/HTML52011. 1. 8. 01:51

[Canvas] canvas 2. 기본사용법.

기본사용법.

<canvas id="tutorial" width="150" height="150"></canvas>

캔바스는 기본적으로 위와같이 사용하게 됩니다. 

HTML 엘레멘트 공통인 ID attribute를 빼면 width , height 두가지 요소만 가지고 있는 셈입니다.

가로세로 크기를 지정하지않으면 기본적으로 300*150의 공간을 가지고 있고

자바스크립트,CSS어느것으로도 쉽게 캔버스를 컨트롤 할수있습니다.

CSS로는 일반적인 이미지 태그처럼 추가적인 각종 스타일을 지정할수 있습니다.(margin,border,background 등등)


대체 속성

canvas는 기본적으로 지원하는 브라우저가 아직까지는 일반적이지는 않기때문에 지원하지 않는 브라우저를위해

아주 간단하게 대체 문구나 이미지등을 삽입 할수 있게 되어 있습니다.

  1. <canvas id="stockGraph" width="150" height="150">  
  2.   current stock price: $3.15 +0.15  
  3. </canvas>  
  4.   
  5. <canvas id="clock" width="150" height="150">  
  6.   <img src="images/clock.png" width="150" height="150" alt=""/>  
  7. </canvas>  

위의 두가지 canvas 요소들은 각각 canvas를 지원하지 않는 브라우저에서 보았을경우

current stock price: $3.15 +0.15 

이런텍스트를 출력하거나

<img src="images/clock.png" width="150" height="150" alt=""/>

이런 이미지를 출력하게 됩니다. 


그리고 당연한 얘기지만. 대체속성이 필요없다고 하더라도 </canvas>는 항상 붙여야 합니다.

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

'모바일 WEB 관련 > HTML5' 카테고리의 다른 글

[Canvas] canvas 6. path도형 그리기  (0) 2011.01.08
[Canvas] canvas 5. 도형 그리기  (0) 2011.01.08
[Canvas] canvas 4. 간단한예제  (0) 2011.01.08
[Canvas] canvas 3. getContext  (0) 2011.01.08
[Canvas] canvas 1. 소개  (0) 2011.01.08
Posted by windship
모바일 WEB 관련/HTML52011. 1. 8. 01:51

[Canvas] canvas 1. 소개

canvas는 스크립트를 사용해서 그래픽등을 컨트롤 할수있는 새로운 HTML엘레멘트 입니다.

그림이나 사진 간단한 애니매이션들을 표현할수있습니다.


canvas는 처음  Apple for the Mac OS X Dashboard 에서 소개되었고 그 이후

사파리 , 겍코기반브라우저 등에서 지원하기 시작하였으며 HTML5로 잘 알려진 

WhatWG Web applications 1.0 의 일부에 포함되어 있습니다.


canvas는 html과 자바스크립트에대한 어느정도의 지식을 갖춘사람은 큰 어려움없이 접할수 있습니다.


현재 canvas는 파이어폭스1.5이상,오페라9,사파리,구글크롬, 겍코기반브라우저 등에서 동작합니다.

(IE는 9버젼부터 지원예정입니다)

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

'모바일 WEB 관련 > HTML5' 카테고리의 다른 글

[Canvas] canvas 6. path도형 그리기  (0) 2011.01.08
[Canvas] canvas 5. 도형 그리기  (0) 2011.01.08
[Canvas] canvas 4. 간단한예제  (0) 2011.01.08
[Canvas] canvas 3. getContext  (0) 2011.01.08
[Canvas] canvas 2. 기본사용법.  (2) 2011.01.08
Posted by windship
모바일 WEB 관련2010. 6. 5. 01:47

아이폰 웹어플리케이션 개발시 꼭 알아야할것

아이폰 개발시 필요한 내용을 잘 정리해 놓은 자료가 있네요~
원본: http://trend21c.tistory.com/824


1. 아이폰용 css 적용하기

<!--[if !IE]>--> 
<link  
   rel="stylesheet"  
   href="small-screen.css"  
   type="text/css"  
   media="only screen and (max-device-width: 480px)"  
/> 
<!--<![endif]-->



@media only screen and (max-device-width: 480px) { 
/* iPhone only CSS here */
 #test-block { 
   background: red; 
 } 
}


아이폰은 max-device-width가 480px로 정의되어 있습니다.

위 두개의 코드는 이러한 값을 이용하여 아이폰용 css를 추가하는 방법입니다.

범용적인 스타일시트로 모바일 웹어플리케이션을 개발후

아이폰에서는 더 나은 UI를 만들기 위해 위와 같이 아이폰용 CSS를 추가함으로써

아이폰의 사파리브라우저로 접속하는 사용자들에게 다른 UI를 제공해줄수 있습니다.



2. 아이폰용 서버측 코드 실행하기

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser !== false){
    $browser = 'iphone';
  }
?>


<?php if($browser == 'iphone'){ ?>
  <title>Short iPhone only title</title>
<?php }else{ ?>
  <title>Regular title</title>
<?php } ?>


php의 경우 user-agent 값을 이용해서 서버측에서 아이폰을 위한 코드를 별도로 실행이 가능합니다.



3. viewport meta 태그

아이폰은 meta태그의 viewport를 이용해서 더 나은 UX를 제공해줄수 있습니다.

예를 들면 기기의 

최대 가로크기를 정한다거나, 줌레벨을 정한다거나, 사용자 확대축소 방지 여부 등을 설정할 수 있습니다.



<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=780" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
maximum-scale=1.0 



width=device-width

이 값은 페이지를 기기의 width에 맞도록 출력합니다. 아이폰은 320*480의 세로보기 모드와 480*320의 가로보기 모드를 가지고 있습니다. width=780 과 같이 특정 값을 정의할 수도 있지만, 가로, 세로보기 모드에 최적화 시키기 위해서 width=device-width로 설정하는 경우 기기의 width값에 맞춰서 페이지를 보여줍니다.


initial-scale=1.0

이것은 페이지가 로딩될때 확대비율을 정할수 있습니다. 값이 커질 수록 확대 비율된 모습으로 페이지가 나타납니다.



maximum-scale=1.0

허용가능한 확대비율의 최대치를 설정합니다.



user-scalable=0

사용자의 확대보기를 허용할지 여부를 설정합니다. 값은 0(허용하지 않음), 1(확대보기 허용함) 입니다.






<meta name="viewport" content="width=device-width" /> 를 설정했을때




<meta name="viewport" content="width=device-width" />를 설정 안했을때




위의 두개의 예시화면처럼

viewport를 width=device-width 로 설정한 경우에는 

페이지의 가로길이를 기기에 맞춰서 페이지를 보여주지만

설정이 되어있지 않은 경우 

사파리브라우저는 마치 자신이 데스크탑브라우저인양

페이지를 넓게 인식하여 보여줍니다.



4. 툴바 숨기기

window.addEventListener('load', function(){
  setTimeout(scrollTo, 0, 0, 1);
}, false);




위 스크립트를 사용하면 사파리브라우저의 

주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.

툴바가 사라지는 것이 아니라

스크립트를 통하여 스크롤을 아래로 내려 

툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.

이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때 

툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.

그리고 보기에도 확연히 넓어보이는 것을 느낄수 있습니다.





간혹 페이지 콘텐츠 길이가 너무 짧아서 스크롤할 내용이 없을때 

이 스크립트는 우리가 원하는 기능을 수행하지 않을 수도 있습니다.

그리고 페이지 콘텐츠 길이가 스크롤을 내리기에 어정쩡한 길이라면 

툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우도 있습니다.

위의 캡쳐 사진이 그 예입니다. 

콘텐츠 길이가 어정쩡해 툴바가 가려질 만큼 스크롤바가 내려가지 않아

툴바가 절반만 가려진 모습입니다.



이런문제를 해결하기 위해서는 높이값을 최대사이즈로 지정하여 

페이지가 스크롤될 수 있게 할 수 있습니다.


<meta name="viewport" content="height=device-height,width=device-width" />



viewport를 이용해 height=device-height 를 설정하면

height가 기기의 height값이 되도록 설정되기 때문에 콘텐츠 길이가 짧더라도

페이지 최초 로딩 후 툴바가 보이지 않게 됩니다.



5. 기울기변화 감지하기

window.onorientationchange = function() {
  alert(window.orientation); 
}



0 : 일반적인 세로 화면(홈 버튼이 아래에 있음)
-90 : 시계 방향으로 회전된 가로 화면(홈 버튼이 좌측에 있음)
90 : 시계 반대 방향으로 회전된 가로 화면(홈 버튼이 우측에 있음)
180 : 180도 뒤집힌 화면(홈 버튼이 위에 있음)


가로보기 모드와 세로보기 모드에서 다른 UI를 제공하려는 경우

이 이벤트를 동해서 특정 스크립트를 실행할 수 있습니다.



보기 모드에 따라 다른 UI를 제공한다거나 하는 특별한 이유가 없다면

viewport에서 <meta name="viewport" content="width=device-width" />를 설정함으로써

width가 보기 모드에 따라 자동 조절되기 때문에 걱정할 것이 없습니다.



6. 라운드박스, 라운드버튼


.box {  
   -webkit-border-radius: 5px;  /* safari */
   -moz-border-radius: 5px;  /* firefox */
   background: #ddd;  
   border: 1px solid #aaa;  
}







사파리 브라우저에서는 사파리브라우저의 css 속성을 이용하여

쉽게 라운드박스, 라운드 버튼을 구현할 수 있습니다.



7. 터치 이벤트

touchstart
touchend
touchmove
touchcancel (시스템이 터치한 것을 취소하는 경우)


위의 것들은 터치관련 이벤트 입니다.


이벤트 발생시 event객체를 전달 받는데 다음과 같은 프로퍼티가 존재합니다.



touches : 복수로 화면에 터치되는 각 손가락들에 대한 터치 이벤트 모음들. 이 객체들은 페이지에 터치되는 좌표들의 값을 가지고 있습니다.
targetTouches : 터치할 때 발생합니다. 그러나 전체 페이지가 아닌 타깃 요소에만 반응합니다.



8. 제스쳐

gesturestart
gestureend
gesturechange

제스처 관련 이벤트 입니다. 

event 객체를 전달받으며 다음과 같은 프로퍼티가 존재합니다.

event.scale : 확대비율 값입니다. 값 1은 확대축소가 되지 않은 기본 상태 입니다. 값이 1보다 작을 때는 줌-아웃이며 줌-인일때는 1보다 값이 큽니다.
event.rotate - 회전 각도입니다.



9. 특수링크

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

아이폰은 통화 또는 SMS 보내기를 실행할수 있는 특수 링크가 있습니다.

'tel:번호'로 이루어진 링크는 전화연결이 되며
'sms:번호'로 이루어진 링크는 sms가 연결됩니다.







이외에도

아이튠즈 스토어 링크는 아이튠즈와 연결됩니다.

구글맵 링크는 지도 애플리케이션과 연결됩니다.

유튜브 링크는 유튜브 애플리케이션과 연결됩니다.

이메일 주소 링크는 메일 애플리케이션에 연결됩니다.




10. 홈아이콘





사파리 브라우저를 이용하여 웹서핑을 하면서 하단에 + 탭을 클릭하면

현재 페이지를 책갈피(북마크, 즐겨찾기) 추가하거나

홈화면에 추가할 수가 있습니다.






여기서 말하는 홈화면에 추가란 

아이폰의 바탕화면에 아이콘이 생성되어 웹페이지로 빠르게 연결할 수 있는 것을 말합니다.


<link rel="apple-touch-icon" href="http://www.example.com/iphone_home_icon.png" />


이 코드를 넣으면 여기에 설정된 이미지 파일이 홈아이콘으로 설정됩니다. 

홈아이콘은 57*57의 png파일로 만드는 것이 좋습니다.

아이폰에서 자동적으로 볼록 튀어나와보이는 듯한 효과와 아이콘의 라운딩처리를 하기때문에

홈아이콘은 정사각형의 모양으로 만드셔도 됩니다.

홈아이콘이 설정되어있지 않을 경우 

해당 웹페이지의 썸네일화면이 홈아이콘으로 설정됩니다.



11. 디버깅


console.log('Something');
console.error('Oops');
console.warning('Beware!');





위의 코드를 실행하였을 경우 아이폰 사파리 브라우저의 콘솔디버그 도구는 다음과 같은 메시지를 표시합니다.

디버깅용으로 사용되는 함수들입니다.

아이폰 사파리브라우저에서 콘솔디버그 도구를 사용하는 방법은

제가 지난번에 쓴 포스팅에 자세히 나와있습니다.





스마트폰 시장이 발달하고 무선인터넷이 보편화되고, 네트워크이용요금이 점점 낮아지고 있습니다.

스마트폰 시장에서는 저마다의 독자적인 플랫폼들이 속속 자신의 영역을 넓히려 하고 있습니다.

특정기기에 최적화된 어플리케이션은 만드는 것은

사용자경험을 극대화한다는 점에서 좋으나

안드로이드용, 아이폰용, 윈도모바일용 등 플랫폼별로 어플리케이션을 개발해야하는 비용이 뒤따릅니다.


반면 어떠한 플랫폼이든 웹브라우저가 있기때문에

웹어플리케이션은 많은 비용을 절감하면서

스마트폰 사용자들의 기대를 충족시켜줄수 있습니다.


아이폰용 웹어플리케이션을 개발하려고 하신다면 위의 사항을 꼭 알아두시면

개발에 많은 도움이 되실겁니다.


  Commented by 별제이 at 2010/03/22 15:35  r x

http://firejune.com/1506
이곳도 참고~ 중복이 좀 있긴 한데...다른 내용도 있네요~ 


  Commented by 별제이 at 2010/03/23 11:57  r x

http://cafe.naver.com/webstandardproject/349
참고 사이트~
검색키워드: onorientationchange 


  Commented by 별제이 at 2010/03/22 20:57  r x

아이폰 웹 사이트 팁! Tip&Tech
세로보기때 320 픽셀에 딱 맞춘상태인데 좌우로 스크롤 되는 현상이 가끔있다.
특정 div에서 paddding 등을 사용할 경우 주로 이런 현상이 발생하는데...
이를 해결 하는 방법은
body { overflow: hidden; } 또는 
body { overflow: auto; }
속성을 사용하면....해결된다!!! 


  Commented by 별제이 at 2010/03/22 20:24  r x

http://bongdal.tistory.com/63

지도 어플 실행하기
조금 특이한 부분으로 애플과 구글의 제휴로 인해 실행되는부분인듯합니다.
그냥 Anchor 태그에 구글맵 주소를 입력하면 자동으로 구글 지도 어플을 실행시킵니다.

<a href="http://maps.google.com/maps?q=seoul&z=5">서울지도보기</a>
<a href="http://maps.google.com/maps?daddr=seoul&saddr=busan">서울-부산 길찾기</a>


Google Maps parameters
Table 1 Supported Google Maps parameters Parameter
Notes

q=
The query parameter. This parameter is treated as if it had been typed into the query box by the user on the maps.google.com page. q=* is not supported

near=
The location part of the query.

ll=
The latitude and longitude points (in decimal format, comma separated, and in that order) for the map center point.

sll=
The latitude and longitude points from which a business search should be performed.

spn=
The approximate latitude and longitude span.

sspn=
A custom latitude and longitude span format used by Google.

t=
The type of map to display.

z=
The zoom level.

saddr=
The source address, which is used when generating driving directions

daddr=
The destination address, which is used when generating driving directions.

latlng=
A custom ID format that Google uses for identifying businesses.

cid=
A custom ID format that Google uses for identifying businesses.

YouTubu 어플 실행하기
역시, Anchor 에서 youtube와 연결된 링크가 있을경우 자동으로 내장된 YouTubu 어플이 실행됩니다.
웹상에서는 위의경로는 웹페이지에서 실행되며, 아래의 경로는 전체화면 플레이어가 실행됩니다.

<a href="http://www.youtube.com/watch?v=a_GaLdTbOG4">YouTube Play1</a>
<a href="http://www.youtube.com/v/a_GaLdTbOG4">YouTube Play2</a>

아이튠즈 및 앱스토어 실행하기
아래의 URL로 앱스토어 및 아이튠즈 어플이 실행가능합니다.
한가지 주의 할점은 앱스토어의 경우 "http://itunes.apple.com/kr/app/id304608425?mt=8" 어플이 일반적인 경로(일반 web에서 사용)이나, 모바일 사파리에선 내부에서 자동으로 아래 패턴으로 변경하여 사용합니다. 하지만 어플위에 올라간 UIWebview 컨트롤상에서는 따로 구현해주지 않으면 앱스토어 넘어가지 않습니다.

<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=304608425&cc=kr&mt=8&ign-iphone=1 ">지도어플(앱스토어 연결)</a>
<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093464&id=156093462&s=143441">Toy Story OST(itunes 연결)</a> 


  Commented by 별제이 at 2010/03/22 22:01  r x

http://firejune.com/1247

window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) { 
case 0: document.body.setAttribute( "class","portrait" );
document.getElementById( "currentOrientation" ).innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90: document.body.setAttribute( "class","landscapeLeft" );
document.getElementById( "currentOrientation" ).innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90: document.body.setAttribute( "class","landscapeRight" );
document.getElementById( "currentOrientation" ).innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
} 


  Commented by 별제이 at 2010/03/23 10:52  r x

http://www.iphonewebdev.com/examples/hideurl.html

// 아이폰 사파리 툴바 없애기 (IE에서도 에러 없다)
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
} 


  Commented by 별제이 at 2010/03/30 16:21  r x

mobile safari keyboard type / form 샘플

http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/
저작자표시 비영리 변경금지

'모바일 WEB 관련' 카테고리의 다른 글

html+css 회전 각도에 따라 각각 다른 css 부여하기  (0) 2011.01.22
웹페이지 열때 브라우저 종류 인식하기  (0) 2010.06.03
아이폰에서 웹페이지 띄울 때 주소창 자동으로 숨겨주는 처리  (0) 2010.06.03
아이폰용 웹페이지 해상도 최적화  (0) 2010.06.03
Posted by windship
모바일 WEB 관련2010. 6. 3. 22:48

웹페이지 열때 브라우저 종류 인식하기

<script>
//불여우 2/3 버전 감지 by DoctorDan
var FF=/a/[-1]=='a';

//불여우 3 by 원작자
var FF3=(function x(){})[-5]=='x';

//불여우 2 by 원작자 
var FF2=(function x(){})[-6]=='x';

//자신이 전에 올렸던 IE 감지
var IE='\v'=='v';

//사파리 by 원작자
var Saf=/a/.__proto__=='//';

//크롬 by 원작자
var Chr=/source/.test((/a/.toString+''));

//오페라 by 원작자
var Op=/^function \(/.test([].sort);

//위에 모든걸 통틀어 브라우저 인식하는 한줄 스크립트 
var B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'

//보너스:링크 #2에서 발췌한 IE 감지 스크립트 
var IE=!!top.execScript
document.write(B);
</script>
<SPAN id=tx_marker_caret></SPAN>


출처 : http://towis.net/2690114
저작자표시 비영리 변경금지

'모바일 WEB 관련' 카테고리의 다른 글

html+css 회전 각도에 따라 각각 다른 css 부여하기  (0) 2011.01.22
아이폰 웹어플리케이션 개발시 꼭 알아야할것  (0) 2010.06.05
아이폰에서 웹페이지 띄울 때 주소창 자동으로 숨겨주는 처리  (0) 2010.06.03
아이폰용 웹페이지 해상도 최적화  (0) 2010.06.03
Posted by windship
모바일 WEB 관련2010. 6. 3. 21:59

아이폰에서 웹페이지 띄울 때 주소창 자동으로 숨겨주는 처리

<HEAD> </HEAD> 사이에 다음 태그를 넣는다.

<script type="application/x-javascript"> 

    if (navigator.userAgent.indexOf('iPhone') != -1) 
    { 
        addEventListener("load", function() 
        { 
        setTimeout(hideURLbar, 0); 
        }, false); 
    } 

    function hideURLbar() 
    { 
        window.scrollTo(0, 1); 
    } 
</script> 

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

'모바일 WEB 관련' 카테고리의 다른 글

html+css 회전 각도에 따라 각각 다른 css 부여하기  (0) 2011.01.22
아이폰 웹어플리케이션 개발시 꼭 알아야할것  (0) 2010.06.05
웹페이지 열때 브라우저 종류 인식하기  (0) 2010.06.03
아이폰용 웹페이지 해상도 최적화  (0) 2010.06.03
Posted by windship
모바일 WEB 관련2010. 6. 3. 17:21

아이폰용 웹페이지 해상도 최적화

아이폰 웹페이지 이것만 알아도 유용하다.

<head></head>사이에 아래의 한줄을 집어넣어보자.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  

위의 한줄을 집어넣음으로써 아이폰의 해상도에 적절하게 화면이 표시될 것이다.
간단한 내용이지만 한부분씩 살펴보겠다.

width=device-width; 
이부분은 영문 그대로 웹페이지의 너비를 기기의 너비대로 보여주라는 얘기다.
아이폰은 320 x 480의 해상도를 갖고 있으므로 320px에 맞춰주는 역할을 한다.

initial-scale=1.0;
초기화면 로딩시 몇배로 보이게 할 것인가를 지정해주는 부분이다.
당연한 얘기지만 1.0으로 지정하면 1배로 보이게 된다.

maximum-scale=1.0;  1배 까지 확대가능. 즉, 확대 불가를 의미한다.
아이폰은 멀티터치를 이용해서 화면을 맘대로 키우거나 줄일 수 있다. 
그러나 때로는 웹사이트가 멀티터치로 화면크기 조절이 안되는걸 볼 수 있는데 
이는 바로 이 옵션이 1로 적용되었기 때문이다.

maximum-scale=10.0; 이렇게 지정하면 10배까지 확대가 가능해진다.

user-scalable=0; 이부분은 멀티터치를 확용한 확대를 허용할 것인가의 여부를
결정하는 부분이다. 위에서 maximum-scale의 숫자를 키우면 해당 숫자 배수까지
화면이 커질 수 있다고 설명했지만 user-scalable가 0으로 되어있으면 작동하지 않는다.

반대로 user-scalable가 1이 적용되어 확대조절을 허용하더라도 
maximum-scale이 1.0으로 되어있으면 화면 확대가 안된다.

 

아래에 예제 하나를 제시한다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" /> 

 위의 예제의 설정은 웹페이지를

1) 아이폰 화면에 맞추며,
2) 처음 크기는 1배로,
3) 그러나 10배까지 키울 수 있다.


아이폰을 위한 웹페이지의 가장 기초적인 부분이지만, 응용해서 좋은 웹사이트를 제작하시길 바랍니다.


---


출처 : http://ozahir.com/941

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

'모바일 WEB 관련' 카테고리의 다른 글

html+css 회전 각도에 따라 각각 다른 css 부여하기  (0) 2011.01.22
아이폰 웹어플리케이션 개발시 꼭 알아야할것  (0) 2010.06.05
웹페이지 열때 브라우저 종류 인식하기  (0) 2010.06.03
아이폰에서 웹페이지 띄울 때 주소창 자동으로 숨겨주는 처리  (0) 2010.06.03
Posted by windship

티스토리툴바