모바일웹 개발시 알아두면 유용한 8가지

차근차근/Android

모바일웹 개발시 알아두면 유용한 8가지

예쁜꽃이피었으면 2015. 1. 28. 17:44

http://qnibus.com/blog/useful-things-for-mobile-web-development/

1. Javascript의 onClick 이벤트 사용시 아이폰 문제

iPhone에서 onClick 이벤트가 동작하지 않는 경우가 종종 있다. 이는 html 엘리먼트에 cursor 속성이 없기때문이다. 아이폰에서는 click 이벤트가 동작하지 않습니다.
혹자는 touchstart 이벤트를 걸어서 사용하면 된다고 하는데 touchstart는 말 그대로 터치를 시작하는 순간에 발생하는 이벤트라 스크롤이 필요한 곳에서 사용하는 경우 오동작을 초래 합니다.
아래와 같이 anchor 속성이 아닌 태그에 click이벤트를 거는 경우 반드시 아래와 같이 cursor 속성을 강제로 지정해주어야 합니다.

1
2
3
.foo {
    cursor: pointer;
}

2. 오리엔테이션 가로모드시 폰트가 멋대로 확대/축소되는 문제

그림과 같이 웹킷에는 기본적으로 텍스트 사이즈를 뷰사이즈에 맞게 확대/축소해주는 기능이 있습니다.
이로 인해 발생하는 문제이며, 해결방법은 원하는 곳에 CSS를 다음과 같이 추가해주시면 됩니다.

1
2
3
.foo {
    -webkit-text-size-adjust: none;
}

3. 오리엔테이션 이벤트가 발생한 시점 알아내는 방법

jQuery를 사용하여 작성하였으니 참고해주시기 바라며, 반드시 document가 아닌 window의 이벤트를 참조해야 합니다.
is_portrait() 와 is_landscape() 함수를 보시면 알 수 있듯이 오리엔테이션의 방향 역시 판단할 수 있으니 참고하시기 바랍니다.
저의 경우 오리엔테이션시 강제로 잡아놓은 영역들의 넓이와 높이 값을 조정하는 용도로 활용했습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(window).on("orientationchange", function(event) {
	setTimeout(function() {
	    //do common
	    if ( is_portrait() ) {
	        //do something
	    } else if ( is_landscape() ) {
	        // do something else
	    }
	}, 250);
});
 
function is_portrait()
{
    var uagent = navigator.userAgent.toLowerCase();
    if ( uagent.search('ipad') > -1 ) {
        var r = ( window.orientation == 0 || window.orientation == 180 );
    } else {
        var r = ( screen.width < screen.height );
    }
    return r;
}
 
function is_landscape()
{
    var uagent = navigator.userAgent.toLowerCase();
    if ( uagent.search('ipad') > -1 ) {
        var r = ( window.orientation == 90 || window.orientation == -90 );
    } else {
        var r = ( screen.width > screen.height );
    }
    return r;
}

4. Web에서 앱 설치여부를 판단하는 방법

물론 웹은 모바일 디바이스에서의 웹이오니 착오 없으시기 바라며, 검색해보시면 여러 개발자 분들께서 만들어 올려놓으신 소스를 쉽게 찾아볼 수 있습니다.
제가 작성한 하단의 설치여부 스크립트는 앱에서 URL Scheme를 만들어놓고 해당 스키마로 즉, 해당 앱으로 연결이 되지 않을때 스토어로 이동하게 처리하였습니다.
단, 예외 사항이 있었는데요~ 기존 안드로이드 하이브리드앱에서 구현시 동작이 되지 않았습니다. 아마도 컴파일된 브라우저 버전이 낮아서 일꺼란 추측정도만 하고 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var iphone_id = '368903918';
var android_id = 'com.godo.com';
function is_installed_ios(menu_url)
{
    var appstoreUrl = 'http://itunes.apple.com/kr/app/id' + iphone_id + '?mt=8';
    var url = "godo://mobileapp?url=" + menu_url;
    var clickedAt = +new Date; 
 
    AppCheckTimer = setTimeout(function() { 
        if (+new Date - clickedAt < 2000)
        { 
        	if (confirm("앱스토어에서 다운로드 받으시겠습니까?")) {
        		location.href = appstoreUrl;
        		return false;
        	}
        }
    }, 1500);
    location.href = url;
}
 
function is_installed_android()
{
    var macketUrl = 'com.godo.com://mobileapp';
    install_and(macketUrl);
    $("#is_app").html( "<iframe id='frm' src='" + macketUrl + "' width=0 height=0 frameborder=0></iframe>" );
    setTimeout(function () {
        var div = $("#is_app");
        var iframe = $("#frm");
        if( iframe.length > 0)
        {
            iframe.remove();
        }
    }, 1000 );
 
}
 
function install_and(macketUrl)
{
    var clickedAt = new Date();
    setTimeout( function () {
        if(new Date() - clickedAt < 1500) 
        {
        	if (confirm("플레이스토어에서 다운로드 받으시겠습니까?")) {
        		location.href = 'market://details?id=' + android_id;
        		return false;
        	}
        }
    }, 500);
}

5. 갤럭시S4에서 border-radius가 비적용 문제

갤럭시S4의 펌웨어 버그라고들 하는데요, 처음에 이문제를 접했을때, 당황스러웠습니다.
라운드 처리된 박스모양이 나와야 하는데 가장 최신형이라는 폰에서 그런 문제가 나오니 겪어보시면 황당하리라 생각합니다.
이럴 경우 다음과 같이 하시면 제대로 출력됩니다.

1
2
3
4
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

6. background-size가 안먹는 경우

레티나와 같은 화면 비율에 따른 CSS처리하실 때 사용하는 속성인데요, 약간의 주의가 필요합니다.
background: url(‘url’) no-repeat…. 이런 식으로 사용하시면 background안에 사이즈 속성까지 잡아버리기 때문에 반드시 background-size를 나중에 선언해서 사용해야만 제대로 적용이 됩니다.
만약, background-image로 이미지를 적용하셨다면 위와 같은 문제는 만나지 않으실 수 있으니 참고하세요!

7. Highlight영역 커스텀 하기

기본적으로 버튼이나 링크영역을 터치하면 검정색으로 누르는 효과가 나타납니다.
여기서 알려드리는 팁은 그 검정색을 변경하는 방법에 대한 소개입니다.

1
2
3
4
5
6
7
html {
    -webkit-tap-highlight-color: rgba(236, 83, 75, 0.65);
}
 
.no-highlight {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-highlight 클래스를 태그에 적용해놓으면 기본형으로 설정되니 참고하세요.

8. 배지 만들기

푸시를 하면서 배지가 필요하게 되어 CSS를 이용해 간단하게 만들어보았습니다.
상단에 보시면 뱃지 보이시죠? 아이폰에서 제공하는 기본스타일이며 그림과 같이 표현되니 응용해서 사용하면 됩니다.
CSS3가 제대로 지원되지 않는 브라우저에서는 표현이 안되니 참고하세요!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.badge {
    background:             radial-gradient( 1px -11px, circle, white 8%, red 26px );
	background:    -moz-radial-gradient( 1px -11px, circle, white 8%, red 26px );
	background:     -ms-radial-gradient( 1px -11px, circle, white 8%, red 26px );
	background:      -o-radial-gradient( 1px -11px, circle, white 8%, red 26px );
	background: -webkit-radial-gradient( 1px -11px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px;
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 12px/9px Helvetica, Verdana, Tahoma;
    height: 12px;
    padding: 2px 3px 0 3px;
    text-align: center;
    min-width: 8px;
}

저작자표시 비영리

'차근차근 > Android' 카테고리의 다른 글

웹뷰 폰트 적용하기 (0)	2015.01.29
안드로이드 폰트 변경 (0)	2015.01.29
[Android] WebView 에서 자바스크립트 실행하기 (0)	2015.01.28
안드로이드 갤러리 갱신 - 했다. (0)	2015.01.26
갤러리 이미지 안보임 (0)	2015.01.23

현재글모바일웹 개발시 알아두면 유용한 8가지

개인 공부를 위한 블로그입니다.

ubuntu, MYSQL, 10953, 패스트캠퍼스, Gunicorn, 직장인자기계발, 10952, 직장인인강, AWS, 패스트캠퍼스후기, 10951, 패캠챌린지, 백준, Django, 자바, 인증문자, 한 번에 끝내는 코딩테스트 369 Java편 초격차 패키지 Online., docker, nginx, vuejs,

Today :
Yesterday :

내 인생에도 예쁜 꽃이 피었으면 좋겠다