위의 url 과 동일하세 입력편의를 위한, "@" , "." 을 기본 레이아웃으로 제공하여 줍니다.
<input type="text" />
사파리에서 검색에 히스토리 아이콘 표시하는 방법
<input type="search" results="5" />
다음 브라우저에서는 text field로 표시가 되는 것을 확인하였다고 하네요
Safari
Camino
Firefox
IE6
IE7
Opera 9
그러나 유효하지 않는 XHTML이 되버려서 safari만을 위한 자바스크립트를 사용하는 것이 더 좋을 것 같다.
스크립트 많이 쓰이는 구만...
safari ->사파리 브라우저 확인용 변수 사용자가 정의를 해야 되겠군요.
if (safari) {
var s = $("#s"); // s라는 ID값을 가진 객체를 jquery로 선택
s.attr("type", "search").attr("results", "5");
}
if (safari) {
var s = document.getElementById("s");
s.type = "search";
s.setAttribute("results", "5");
}
13.아이폰 모바일 사파리에서 아이폰 기본어플 실행하기
1. 전화걸기
Anchor 태그에 "tel" 프로토콜을 사용하면 자동으로 전화 연결이 됩니다. 전화 기능이 없는 아이팟 터치
에서는 주소록에 등록하기 메뉴가 뜹니다. 또한 '< meta name = "format-detection"
content = "telephone=no >' 태그 설정을 해주지 않으면 연속 되는 7자리 이상의 숫자나 특정 패턴의
숫자는 전화번호로 인식하기 때문에 주의 하여야 합니다.
<a href="tel:15880010">Show 고객센터 연결하기</a>
2. 문자보내기
Anchor 태그에 "sms" 프로토콜을 사용하면 문자보내기로 연결됩니다.
문자 보내기 어플은 아래와 같이 전화번호를 입력하여 받는사람을 지정할수 있습니다.
<a href="sms:">문자보내기 어플실행</a>
<a href="sms:1588-0010">Show 고객센터에 문자보내기 </a>
Anchor 태그에 "mailto" 프로토콜을 사용하여 메일을 보낼수있습니다. 이는 모바일 사파리 뿐만 아니라
모든 브라우져에서 공통된 기능이구요, mailto 에는 받는사람, 메일제목, 참조자, 메일 내용까지 지정하여 어플을 실행시킬수
있습니다.
또한 메일보내기는 사파리를 종료하지 않고 메일보내기가 실행되므로, 사용자 관점에서는 참유용한 기능인듯 합니다.
mailto 에서사용 가능한 속성은 아래와 같습니다.
cc : 참조
bcc : 숨은 참조
subject : 메일제목
body : 메일본문
<a href="mailto:">메일보내기 실행</a>
<a href="mailto:sgb000@hanmail.net">bongdal 에게 메일보내기</a>
<a
href="mailto:sgb000@hanmail.net?cc=sgb000@naver.com&bcc=sgb000@nate.com&subject=mailto
test&body=mail send body">내용채워서 메일보내기</a>
4. 지도 어플 실행하기
조금 특이한 부분으로 애플과 구글의 제휴로 인해 실행되는부분인듯합니다.
그냥 Anchor 태그에 구글맵 주소를 입력하면 자동으로 구글 지도 어플을 실행시킵니다.
<a href="http://maps.google.com/maps?q=seoul&z=5">서울지도보기</a>
<a href="http://maps.google.com/maps?daddr=seoul&saddr=busan">서울-부산 길찾기</a>
Table 1 Supported Google Maps parameters
|
Parameter |
Notes |
|
q= |
The
query parameter. This parameter is treated as if it had been typed into
the query box by the user on the maps.google.com page. q=* is not supported |
|
near= |
The location part of the query. |
|
ll= |
The latitude and longitude points (in decimal format, comma separated, and in that order) for the map center point. |
|
sll= |
The latitude and longitude points from which a business search should be performed. |
|
spn= |
The approximate latitude and longitude span. |
|
sspn= |
A custom latitude and longitude span format used by Google. |
|
t= |
The type of map to display. |
|
z= |
The zoom level. |
|
saddr= |
The source address, which is used when generating driving directions |
|
daddr= |
The destination address, which is used when generating driving directions. |
|
latlng= |
A custom ID format that Google uses for identifying businesses. |
|
cid= |
A custom ID format that Google uses for identifying businesses. |
5. YouTubu 어플 실행하기
역시, Anchor 에서 youtube와 연결된 링크가 있을경우 자동으로 내장된 YouTubu 어플이 실행됩니다.
웹상에서는 위의경로는 웹페이지에서 실행되며, 아래의 경로는 전체화면 플레이어가 실행됩니다.
<a href="http://www.youtube.com/watch?v=a_GaLdTbOG4">YouTube Play1</a>
<a href="http://www.youtube.com/v/a_GaLdTbOG4">YouTube Play2</a>
한가지 주의 할점은 앱스토어의 경우
"http://itunes.apple.com/kr/app/id304608425?mt=8" 어플이 일반적인 경로(일반 web에서
사용)이나, 모바일 사파리에선 내부에서 자동으로 아래 패턴으로 변경하여 사용합니다. 하지만 어플위에 올라간 UIWebview
컨트롤상에서는 따로 구현해주지 않으면 앱스토어 넘어가지 않습니다.
<a
href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=304608425&cc=kr&mt=8&ign-iphone=1
">지도어플(앱스토어 연결)</a>
<a
href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093464&id=156093462&s=143441">Toy
Story OST(itunes 연결)</a>
14.모바일 사파리에서 Geolocation 사용하기
Geolocation 객체는 모바일 사파리에서 위치 정보를 담고 있는 오브젝트로 OS3.0 이상에서 사용가능하며.
좌표체게는 위도와 경도를 이용하는 WGS84 좌표계를 쓰고 있다.
"위치 정보는 확률적 추정에 의한 것으로 정확성을 보장하지 않는다"(FF3.5 위치정보 도움말)
<script type="text/javascript">
/* Mobile Browser UA 체크 */
var ua = navigator.userAgent.toLowerCase();
browser = {
skt : /msie/.test( ua ) && /nate/.test( ua ),
lgt : /msie/.test( ua ) && /([010|011|016|017|018|019]{3}\d{3,4}\d{4}$)/.test( ua ),
opera : /opera/.test( ua ) || /opera mobi/.test( ua ),
ipod : /webkit/.test( ua ) && /\(ipod/.test( ua ) ,
iphone : /webkit/.test( ua ) && (/\(iphone/.test( ua ) || /\(device/.test( ua )),
android : /webkit/.test( ua ) && /android/.test( ua )
}
/* OS version 체크 */
<PRE class=code-javascript>var version = (function(){
var retObj = {}
if(browser.ipod || browser.iphone){
var pattern = /(iphone|ipod)+\s+os+\s+(\d)_(\d)(?:_(\d))?/igm
var result = pattern.exec(ua);
if(result != null && result.length > 0){
retObj.versionFull = result[0];
retObj.os = result[1];
retObj.major = result[2];
retObj.minor = result[3];
retObj.build = result[4] ? result[4] : 0;
}
}
return retObj;
})()</PRE>
// 3.1.2 에서는 Geolocation이 제대로 동작하지 않음.
if((browser.ipod || browser.iphone) && (version.major > 2 && version.build < 2)){
navigator.geolocation.getCurrentPosition(foundLoc);
}
function foundLoc(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("위도 : "+latitude +" , 경도 : "+longitude )
}
</script>
16.기울기에 따라 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>
</html>
17.툴바 숨기기
사파리브라우저의 주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.
툴바가 사라지는 것이 아니라 스크립트를 통하여 스크롤을 아래로 내려 툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.
이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때 툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.
<script type="text/javascript">
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
18.콘텐츠 길이가 너무 짧아 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우
페이지 콘텐츠 길이가 너무 짧아서 스크롤할 내용이 없을때 이 스크립트는 우리가 원하는 기능을 수행하지 않을 수도 있습니다.
그리고 페이지 콘텐츠 길이가 스크롤을 내리기에 어정쩡한 길이라면 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우도 있습니다.
이런문제를 해결하기 위해서는 높이값을 최대사이즈로 지정하여 페이지가 스크롤될 수 있게 할 수 있습니다.
<meta name="viewport" content="height=device-height,width=device-width" />
19.라운드 박스
.box {
-webkit-border-radius: 5px; /* safari */
-moz-border-radius: 5px; /* firefox */
background: #ddd;
border: 1px solid #aaa;
}
20.터치이벤트
touchstart
touchend
touchmove
touchcancel (시스템이 터치한 것을 취소하는 경우)
이벤트 발생시 event객체를 전달 받는데 다음과 같은 프로퍼티가 존재합니다.
touches : 복수로 화면에 터치되는 각 손가락들에 대한 터치 이벤트 모음들. 이 객체들은 페이지에 터치되는 좌표들의 값을 가지고 있습니다.
targetTouches : 터치할 때 발생합니다. 그러나 전체 페이지가 아닌 타깃 요소에만 반응합니다.
21. 제스쳐
gesturestart
gestureend
gesturechange
event 객체를 전달받으며 다음과 같은 프로퍼티가 존재합니다.
event.scale : 확대비율 값입니다. 값 1은 확대축소가 되지 않은 기본 상태 입니다. 값이 1보다 작을 때는 줌-아웃이며 줌-인일때는 1보다 값이 큽니다.
event.rotate - 회전 각도입니다.
(0) 
(0)
