모바일 웹

아이폰4가 DPI 가 300 이 넘는다.

아이폰4와 아이폰3GS그 이전단계는 해상도가 차이는 나지만 뷰포트는 width 320px로 같다

같은 이미지를 출력해도 3GS에서는 가로기준 이미지 1px당 디스플레이 1px로 일치하지만 아이폰4에서는 이미지에서 1px당 디스플레이에서는 2px이 보여지게 되므로 흐릿한 이미지로 보여지게 된다.

이를 해결하기 위해선 더 높은 해상도의 이미지를 줄여서 보여주면 된다.

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

 - user-scalable : 사용자가 두손가락으로 확대/축소 가능 여부.

 - 모든 스케일은 1.0으로 맞추고 width값을 device-width로 할경우에 모바일 브라우져의 너비값으로 자동으로 인식

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

 - 홈화면에 추가시 아이콘과 홈화면에서 접속시 로딩화면 이미지

 - PNG파일 사용하면 투명은 검은색으로 처리되고, opacity까지 정확하게 먹는다.

 - 57*57의 아이콘을 권장하나 114px x 114px정도 만들어줘야 아이폰4에서도 선명하게 나온다

 - 반사광을 원하지 않을경우 <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />

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

 - 홈 화면에 추가 후 실행 시킬 때

 - 사파리툴바 없애기

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

 - 처음 구동시 로딩화면

 - startup.png는 320px x 460px이 정확해야 하며 사이즈가 맞지 않으면 저장되지 않는다.

<a href="#" onclick="location.href='http://ojtiger.com/'">오중호랑이의 비밀로긔</a>

 - 앵커태그 사용시 사파리로 점프한다. (온클릭이벤트로 전환)

if (navigator.userAgent.indexOf('iPhone') != -1) {

//if (navigator.userAgent.indexOf('Linux') != -1) {

    addEventListener("load", function() {

    setTimeout(hideURLbar, 0);

    }, false);

}

function hideURLbar() {

    window.scrollTo(0, 1);

} 

 - 주소 표시줄 없애기

 - 로딩이 완료되면 주소표시줄이 숨어버리는것인데 이는 스크롤을 1px내려서 주소표시줄을 숨기는 원리

 - 위 자바스크립트로 구현이 가능하나, 이는 IE에서 스크립트 오류

 - 안드로이드의 브라우져의 navigator.userAgent는 Linux를 포함

 - 내용이 짧아서 주소표시줄이 제대로 올라가지 않으면 메타태그에 height=device-height

var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');

    for (var word in mobileKeyWords){

        if (navigator.userAgent.match(mobileKeyWords[word]) != null){

            location.href = "#";

            break;

            }

    }

 - 모바일 기기 인식 후 모바일 페이지로 이동.

<input type="email" value="email">

<input type="number" value="number">

<input type="url" value="url">

<input type="tel" value="tel">

 - 가상 키보드 종류

 - tel의 경우가 굉장히 편리한 경우이긴 하지만 HTML5와 파이어폭스4이상에 따르면 강제성이 부여 되므로, 두가지 속성을 입력받아야 한다면 반드시 클라이언트별로 분리해 놓는것이 좋겠다.

var slope = 0;

var supportsOrientationChange = "onorientationchange" in window,

orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

    window.addEventListener(orientationEvent, function() {

        if (slope!=window.orientation){

            slope = window.orientation;

                if(slope == 90 || slope == -90) {

                    location.href('#');

                }

        }

}, false);

 - slope변수를 직접 찍어봐두 알겠지만, 정상일때0, 회전일때90, 혹은 반대방향일 경우-90이다.

   (아이폰과 안드로이드가 방향이 다르다)

.loading_div {

    position:absolute;

    top: 50%;

    left: 50%;

    width: 140px;

    height: 180px;

    color:#fff;

    border: 1px solid #ccc;

    background: #162344;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border: 1px solid #b2b7c2;

    opacity:0.9;

    }

<div class="loading_div" align="center">

        <br />

        <img src="/test/Untitled-1.gif" width="130" height="101" alt="오중호랑이" />

        라운드박스'-'

</div>

 - 라운드 div CSS

 - 웹킷계열(모바일사파리, 안드로이드브라우져 등)과 모질라 파이어폭스에서 지원하는 css를 사용하면 손쉽게 라운드 div를 만들 수 있다

.gra{

-webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.5))); 

}

<img src="#" class="gra" alt="#" />

 - 이미지 반사 그라데이션 효과도 있다. 아이폰은 완벽히 지원하나 안드로이드(일단은 모토로이)의 경우에는 반사 길이 및 투명효과를 제대로 지원하지 않기에 안드로이드에 대한 처리를 따로해줘야 한다.