모바일 디자인/코딩

<Mobile>

* 1) 기기별 디바이스의 사이즈(물리적 해상도=핸드폰의 실제 액정화면의 크기)가 다른점에 대한 고민,

   - 기준이 되는 모바일기기를 하나 정해서 시안을 잡는다.

　- 코딩시 아래의 메타태그를 삽입한다.

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no ,

     tar　get-densitydpi=medium-dpi">

   2) 실해상도가 다른것에 대한 고민

    - 미디어쿼리로 각각의 디바이스에 맞는 해상도를 지원

    - 1/2 코딩법으로 코딩:640 x 960싸이즈를 기준으로 디자인 해서 psd를 저장해두고,

                                   그 이미지를 다시 320으로 반절 줄여서 또 psd로 저장해두고 작업함.

                                   그 후에 320 x 480 으로 코딩(퍼블리싱)한다.

*유동형 레이아웃:

  - 코딩시에는 해상도와 이미지가 가로세로 유동적으로 변할 수 있도록 warp같은 박스는 필요없다.

  - 싸이즈는 % 로 잡는다.

  - 단으로 구성된 부분(플롯으로 단을 형성해야 하는 부분)도 %로 나눠서표시 ..예를들어 3등분이면 33%, 4등분이면 25%

  - 왼쪽은 float:left , 오른쪽은 float:right ,코딩. 혹은 포지션값을 주고, 탑0, 라이트0,( 더보기, 써치 같은기능) 

  - 배경/ 패턴 / 이미지는 = 백그라운드 리핏을 사용해서, 무한반복 되도록 css작성                    

      

 

*모바일 기기별 해상도

320 x 480 : 아이폰3G(S), 안드로원, 레전드
480 x 800 : 넥서스원,넥서스S, 디자이어(HD), HD2, 갤럭시S/A,  시리우스, 베가, 옵티머스Q, 올레패드
480 x 854 : 모토로이, 모토쿼티, 모토슬램
640 x 960 : 아이폰4, 4s  --> 가장일반적으로 디자인 시안 잡을때 사용하는 해상도 
600 x 1024 : 갤럭시탭
768 x 1024 : 아이패드
1024 x 768 : 아이패드2
2048 x 1536 : 아이패드3
1280 x 720 : 갤럭시노트2, 갤럭시s3, 베가 r3
1280 x 768 : 옵티머스g

640 x 1136 : 아이폰5

1920 x 1180 : 갤럭시4

-아이폰 3G의 경우 실제 가로 해상도는 320px이지만 아이폰의 사파리 웹
브라우저는 기본적으로 980px인 것처럼 작동합니다.

 

↓↓↓↓전 세계 모바일 기종의 해상도 표시

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

 

-------------------
*Viewport

모바일 기기에서 Media Query가 예상한대로 작동하기 위해서는
웹 브라우저의 가상 해상도를 물리적 해상도(핸드폰의 실제 액정화면의 크기)와 일치시킬 필요가 있습니다.
모바일 웹브라우저들은 웹브라우저의 가상 해상도를 조절할 수 있는 viewport메타 태그를 지원합니다.

메타테그의 뷰포트를 이용해, content="width=device-width 를 넣어주면, 각 기종에 딱 맞는 넓이값이 적용됨.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no , target-densitydpi=medium-dpi">

<meta name="viewport"
content="
width=[가상해상도],
initial-scale=[초기 확대 축소 비율],
maximum-scale=[최대 확대 비율],
minimum-scale=[최소 축소 비율],
user-scalable=[사용자에 의한 확대 축소 허용 여부]
target-densitydpi=[기긱의 실제 해상도]
"
/>

width : 넓이 - device-width | N px (200~10000 px, default 980 px)
height : 높이 - device-height | N px (223~10000 px)
initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율  N (0~10, default 0.25)
maximum-scale : 최대 확대 배율  N (0~10, default 1.6)
user-scalable : 확대/축소 가능 여부  yes | no (default yes)
target-densitydpi : device-dpi, high-dpi(480x800), medium-dpi(기본값 320x480), low-dpi
※ HVGA(MDPI) 320x480  /  WVGA(HDPI) 480x800

initial-scale은 중요하다.
480의 해상도를 갖고 있는 스마트폰을 위해선 디자인을 480에 맞춰서 해야 하는데.
320의 해상도를 갖는 스마트폰으로 보면 문제가 생길수도 있다(레이아웃이 깨지는등의) 
따라서 정확하게 값을 지정해줘야 한다.
480디자인 → 320 뷰 :  initial-scale=0.67, target-densitydpi=medium-dpi (두값 모두 320을 위한 값으로 지정한다.)
480디자인 → 480 뷰 : initial-scale=1, target-densitydpi=high-dpi (두값 모두 480을 위한 값으로 지정한다.)

다른 방법
480으로 1.5배 크게 디자인을 한뒤 코딩할때 1.5배를 줄여서 CSS를 정의하여 연결한다.

---------------------------------
*iPhone Splash Screen : 아이폰을 포함한 거의모든 최신 기종에서 다 실행됨.

스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다. 스플래시 스크린을 추가하는 방법은 간단합니다.

<link rel="apple-touch-startup-image" href="startup.png">

 

해당 이미지의 사이즈가 320 x 460 px 로 맞춰야 하며,

전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.

--------------------------------
*iPhone 폰트사이즈 고정하기

모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다.

웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라 폰트 사이즈가 변경되는데

보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.
폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.

css첫 줄에 아래 내용을 반드시 삽입.

-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)

---------------------------------
*iPhone 상단 바 컬러 설정

아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다. 특별한 기능이 있는건 아니지만 디자인을 좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.

// 기본 밝은 계열 
<meta name="apple-mobile-web-app-status-bar-style" content="default">

// 검정색 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

// 반투명 검정색 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

--------------------------------
*iPhone4 레티나 디스플레이

.myImage {height: 40px; width: 100px; -webkit-background-size: 100px 40px;
                   background: url("images/myImage.jpg");}
@media screen and (-webkit-device-pixel-ratio: 2) {
     .myImage {background: url("images/myImage@2x.jpg"); }
}

고해상도의 아이폰4가 출시하면서 우리는 고해상도의 이미지를 제공하여 iphone4 사용자의 만족도를 극대화할수 있습니다.
320x480의 2배인 640x960의 레티나 디스플레이

http://aralbalkan.com/demos/high-dpi-images/ iphone4로 봤을때 이미지의 흐림 현상해결
결론은 이미지를 두배로 만들고 코딩시 320에 맞춰 코딩(CSS)했다. 1.5는 480기준으로 봤을때의 결과다.

--------------------------------
*iPhone 홈 화면 아이콘 등록

-아이폰의 홈화면 등록하기에 사용될 아이콘을 저장한다.

// 반사광 효과를 주는 경우 
<link rel="apple-touch-icon" href="home-icon-name.png">

// 반사광 효과가 없는 경우 
<link rel="apple-touch-icon-precomposed" href="home-icon-name.png">

---------------------------------
*iPhone 홈 화면 전체 화면 모드(아이폰에 상단의 주소표시줄 숨기기)

웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해

웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다.

단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.

<meta name="apple-mobile-web-app-capable" content="yes">

자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다. 
추가로 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.

<script type="text/javascript"> 
window.addEventListener("load",function(){ 
setTimeout(scrollTo,0,0,1); 
},false); 
</script>

------------------------------------
*회전에 따른 다른 CSS적용하기

<script type="text/javascript">
function orient()
{
 switch(window.orientation){
    case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";break;
    case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";break;
    case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";break;
 }
}
window.onload = orient();
</script>

<body onorientationchange="orient();">
</body>
------------------------------------
*기본 어플 호출하기

 전화걸기    : <a href="tel:1588-2120 ">블루웹 고객센터</a>
 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
 메일보내기 : <a href="mailto:aaa@nate.com">메일보내기</a>

아이폰 사파리에서 전화번호 링크를 마음대로 하는 경우가 있는데 이럴 경우
<meta name = "format-detection" content = "telephone=no"/>
하면 자동 링크가 되지 않는다.

 

 

***모바일 코딩시 항시 들어갈 코드 정리***

<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="yes">  --> 애플기종의 상단 주소줄 감춤
 
<meta name="apple-mobile-web-app-status-bar-style" content="black">  -->아이폰 주소창의 컬러값을 블랙으로 설정

 

 <link rel="apple-touch-icon" href="app_icon.png" /> -->핸드폰 액정에 바로가기 아이콘 띄우기

 
<link rel="apple-touch-icon-precomposed" href="app_icon.png" /> -->핸드폰 액정에 반사광 없는 바로가기 아이콘 띄우기
 
<link rel="apple-touch-startup-image" href="startup.png"/> -->핸드폰 액정에 로딩이미지 띄우기 

 

<script>
  // <![CDATA[
  try {
   window.addEventListener('load', function(){
    setTimeout(scrollTo, 0, 0, 1); 
   }, false);
  } 
  catch(e) {}
  // ]]>
 </script>  --> 애플 이외의 기종의 상단 주소줄 감춤 

[출처] <Mobile>- 모바일용 싸이트 디자인과 코딩|작성자 AHHA슬라임