모바일 사파리는 풀스크린 모드로 모바일 웹을 실행시키는 것이 가능하다. 
...
<meta name="apple-mobile-web-app-capable" content="yes" />
...
이 기능을 활용하여 웨 어플리케이션을 네이티브 어플리케이션과 같은 환경을 만들 수 있지만, 그것은 신중하게 사용하여야 한다. 브라우저 크롬의 손실이 없다는 것은 뒤로 가기, 앞으로 가기 컨트롤을 할 수 없다는 것을 의미한다.
from: 모바일 디자인 & 개발, 279p

상태바 표시 변경
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

아이콘 더하기
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
57x57 : iphone 3gs

저작자표시 비영리 변경금지
많이 버벅대고 많이 서툰 강의였습니다. 너무 죄송했습니다. 다행히 jbossug (http://cafe.naver.com/jbossug), ksug(http://www.ksug.org/) 에서 hadoop과 Spring ROO를 잘 발표해주셨고, 서울 버스를 만드신 유주완님 (http://www.astroframe.com/main) 덕분에 많이 배울 수 있었던 자리였습니다.

부족하고, 허접스럽지만 약간 링크 보강해서 제 발표자료 올려놓습니다. 주최하느라 수고많으셨던 기묘(http://www.gimyo.com/) 분들께도 감사드립니다.

okjsp mobile.mm
okjsp mobile.pdf

자바 커뮤니티 셋이 모여서 자바개발자들의 진로를 얘기할 수 있어서 감사했습니다.

저작자표시 비영리 변경금지
아이폰엔 있습니다. 이런 괴물... 이미지 상단에 "콘솔 디버그 오류 없음" 이라고 보입니다.

설정에서 브라우저 정보에 보면 개발자용이라고 표시됩니다.

콘솔 디버그 옵션을 활성화하면 됩니다.

오류가 생긴 경우 더 자세한 정보를 볼 수 있습니다.

HTML/JavaScript/CSS 의 오류가 보여집니다.

모바일웹 개발시 유용하게 쓰일 것 같습니다.



저작자표시 비영리 변경금지
아이폰에서 접속하는 웹페이지의 로그인 아이디 입력은 번거롭게 만듭니다. 첫글자가 자동으로 대문자로 입력되도록 shift키가 켜져있기 때문이죠.

Safari 브라우저에 특화된 속성이 있습니다.


<input type="text" id="userid" value="" autocapitalize="off"/>





마찬가지로 autocorrect="off" 를 추가하면 맞춤법 검사로 인해 내용이 바뀌는 것도 방지할 수 있습니다.
관련글: 
http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TextandWeb/TextandWeb.html







sponsored post : 
[Adobe RIA 공식 사이트(www.adoberia.co.kr)] 
저작자표시 비영리 변경금지
비밀이라고 할 것까지는 없겠습니다만 점차 모바일 전용페이지들이 사용하고 있는 메타태그를 하나 얘기하려 합니다.

안드로이드폰에서 브라우저를 통해 네이버에 접속하려면 다음과 같은 화면을 볼 수 있습니다. 지난 글에서도 말씀드렸지만 몇 글자 입력하지 않아도 가이드를 다 해줍니다.

브라우저 종류가 무엇인지 판별해서 자동으로 http://m.naver.com 로 옮겨주죠. 화면을 조금 움직이면 좌측 하단에 아이콘이 보입니다. 터치하면...

전체 화면에서 보고 싶은 영역으로 빨리 이동할 수 있게끔 나옵니다.

PC 버전으로 보면 조금 달라집니다.

안드로이드에서 자주 보게되는 줌아웃/줌인 아이콘이 나타나게 되죠.


웹페이지에 다음과 같은 태그가 들어갈 경우 줌 기능을 사용하지 않도록 할 수 있습니다.
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
content를 풀어서 보면

initial-scale=1.0;

maximum-scale=1.0;

minimum-scale=1.0;

user-scalable=no;
감잡으셨죠. ^^

sponsored post : [Adobe RIA 공식 사이트(www.adoberia.co.kr)]
저작자표시 비영리 변경금지
모바일 컴퓨팅 시대가 클라우드 컴퓨팅과 함께 도래하고 있습니다. 모바일 관련된 서비스들을 포털이 먼저 오픈해서 키워가는 듯 합니다. 모바일 웹 중심의 서비스들인데, 점차 아이폰/아이팟터치, 윈도폰(윈도모바일), 안드로이드폰 등에서 실행되는 모바일 앱으로 확산되는 듯 합니다.

기록의 의미도 있고 해서 다섯 포털 (naver, daum, nate, yahoo, paran)의 모바일 페이지를 모아봤습니다.

http://mobile.naver.com/

http://mobile.daum.net/ 아직은 일반폰 분위기의 SMS 중심입니다만 두 번째 탭인 모바일 Daum을 클릭하면 모바일웹에 대한 내용들이 나옵니다.

http://intro.mobile.daum.net/sub.daum?cmd=main

http://mobile.nate.com SKT와 밀접한 nate의 모바일페이지는 음원판매에 신경을 쓰는 듯 합니다.

http://mobile.yahoo.co.kr 야후코리아의 모바일 페이지입니다. http://mobile.yahoo.com/ 과는 분위기가 많이 다릅니다.

http://mobile.paran.com/ 파란은 모바일로 메일을 사용하는 것에 대해서 얘기하고 있습니다.


다섯 사이트 모두 모바일을 홍보하기 위한 역할입니다. 좁디좁은 모바일 화면에서 이들을 만나려면, 데이터 전용요금 가입은 필수입니다.
저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바