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

프론트엔드 포럼

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

2015.09.22 16:22 조회 수

190

이온디

첨부파일 https://imweb.eond.com/frontendforum/363234

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;
}

		

추후 더 발견되면 지속적으로 추가하도록 하겠습니다.
갑자기 정리해서 적으려니 기억이 안나는게 많네요!!

Total 54 articles in 3 / 3 pages

	제목	날짜
	코딩을 배울 수 있는 사이트	2015/08/24	526
14	[스크랩] 2015년도 개발 트렌트 - 프론트엔드 개발자의 입지가 점점 중요	2015/10/06	205
	[팁테크] 모바일웹 개발시 알아두면 유용한 8가지	2015/09/22	190
12	[뉴스] [공개SW 활용사례] 유에프오팩토리, 공개SW로 ‘소셜 임팩트’를	2015/09/22	131
11	[전자정부표준프레임워크] 전자정부 표준프레임워크 신규버전(Ver3.5) 출시	2015/09/22	217
10	[뉴스] 모바일 시대 'BaaS' 뜬다는데…"국내에서 봐쓰(BaaS)?"	2015/09/21	146
9	[스크랩] 웹개발 관련 기술 뉴스 #39 : 15-09-15	2015/09/15	211
8	[스크랩] ‘데이터’를 똑똑하게 만드는 오픈소스 기술 12종	2015/09/14	218
7	[퍼블톡] 하이브리드앱 UI 프레임워크 비교 (무한열정(over****), 2015.08.13) [2]	2015/08/31	1843
6	[뉴스] 삼성전자 IOT를 위한 자바스크립트 플랫폼 iotjs(JerryScript)공개	2015/08/27	173
5	[퍼블톡] 개발에 새로운 힘을 부여하는 '프로그래밍 언어 분기'	2015/08/26	125
4	[자료공유] [템플릿] 메트로 UI 템플릿	2015/08/20	115
3	[스크랩] 프론트 엔트 개발자가 익혀야할 스킬들	2015/08/12	412
2	[퍼블톡] 라이브코딩 채널 개설했습니다. [2]	2015/08/09	168
1	[스크랩] [스크랩] [번역] 프론트엔드 개발자는 왜 구하기 어렵나요?	2015/06/21	285