(0) 
(0)Posted by 홍반장
(0) (0)Posted by 홍반장
1. -webkit-text-size-adjust
페이지가 회전할때 폰트사이즈가 자동으로 변경되지 않도록 한다 그러나 안좋은 면이 있는데 보통 webkit 브라우저들에서는 적용안됨.
auto : default값, 화면의 폭에 맞추어서 텍스트 크기가 자동으로 조절된다.
none : 폰트의 자동크기변환을 막으며 모바일웹에서 일반적으로 설정한다.
n% : 폰트크기를 지정된 사이즈로 변경한다.
html {
-webkit-text-size-adjust:none;
}
<meta name="apple-mobile-web-app-capable" content="yes">
content값이 yes로 지정하면 풀스크린모드로 자동하고 그렇지 않으면 일반모드로 작동한다.
window.navigator.standalone의 속성을 사용해서 풀스크린모드를 표시할수 있다.
content : yes|no
iphone os 2.1 이상
3. apple-mobile-web-app-status-bar-style
<meta name="apple-mobile-web-app-status-bar-style" content="black">
content : black | black-translucent | default
iphone os 2.1 이상
4. format-detection
<meta name="format-detection" content="telephone=no">
content : default | no
전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다.
iphone os 1.0 이상
5. viewport
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
content : width [number | device-width], height [number | device-height], initial-scale [number], user-scalable [no | yes]
width : default 980, 범위 200 ~10,000 (숫자로 입력) 픽셀로 표시됨
height : width값에 따라 비유로 적용이 됨, 범위 223 ~ 10,000 (숫자로 입력) 픽셀로 표시됨
initial-scale : 웹페이지가 보일 때 최초 한번 적용되어서 보이는 비율, zoom in에 대한 범위를 다음 속성으로 지정할수 있다.
minimum-scale : default 0.25, 범위 0 ~ 10.0
maximun-scale : default 1.6, 범위 0 ~ 10.0
user-scalable : yes | no (no 속성은 스크롤 할때 input box에 enter가 입력 되는 것을 막음.
device-width : 기기 width 픽셀값
device-height : 기기 height 픽셀값
7.iphone safari Apple Touch Icon표시
Apple "favicon" 표시방법(WebClip Bookmark)
이미지 파일 사이즈 : 57 * 57
<link rel="apple-touch-icon" href=http://madebysquad.com/iphone/icon.png />
8.아이폰에서 동영상 재생은 MP4파일로 링크
※ 오페라 같은경우 아래와 할경우 파일이 다운이 됨. 옴니아2에서도 동작은 함.
아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.
<A HREF="AAAA.mp4"> 동영상보기 </A>
9.가장 상위 오브젝트는 수치로 가로를 넣어줘야함.
ex> <div style="width=100%;"> ---> <div style="width=480px;">
10.작은 모바일 화면에 맞게 웹페이지 화면 맞추기
META 태그를 쓰면 화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다.
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요
11.모바일로 홈페이지 접속하는 사람들만 골라서 모바일홈페이지로이동시켜주기
12.모바일 사파리의 inputtype에 따른 키보드 레이아웃변화
1. <input type='text' /> 기본 텍스트 타입 입니다.
따로 변경된 부분은 없는 일반 적인 키보드 레이아웃이며 Form 요소로서 return 부분의 Text만 Go 로 변경됬습니다.
2. <input type='search' /> search 타입 입니다.
기본 text type과 동일하며 return 부분의 Text만 Search 로 변경됬습니다. Form 의 내부에 있을때만 적용됩니다.3. <input type='tel' /> tel 타입 입니다.
제일 특이한 부분인데요 전화번호를 입력하기 위한 숫자 키보드가 나타납니다.
<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");
}
2. 문자보내기
Anchor 태그에 "sms" 프로토콜을 사용하면 문자보내기로 연결됩니다.
문자 보내기 어플은 아래와 같이 전화번호를 입력하여 받는사람을 지정할수 있습니다.
|
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. |
|
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. |
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>(0) (0)Posted by 홍반장
Drag provider – the good stuff
Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.
2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency.
Take a look through all the demos below to understand how it works.
(0) (0)Posted by 홍반장
The following is an example showing an already populated select. Clicking the "Add option" button adds a new option to the end of the select and makes it the selected one. Clicking "Replace options" replaces them with a new set of options and then selects the "Green" one.
Note that the above example will not work if you are reading this in a feed reader. In this case click through to view this post in a web browser.
Adding a single option can be done by appending HTML to the select box. The select in the above example has an id of "example" i.e. <select id="example"> and using this method adding a new option by appending HTML can look like this:
1 | $('#example').append('<option value="foo" selected="selected">Foo</option>'); |
This newly added option will be the selected option; to change this behavior remove the selected="selected" part.
To avoid having to write and append HTML and stick with a more Javascript approach the new option can be appended with jQuery by creating a new option object. This next example does not work correctly in Internet Explorer; it will add the new option but only the value and not display any text.
1 | $('#example').append(new Option('Foo', 'foo', true, true)); |
The true, true part at the end will make this item the selected one.
This method gets a handle to the options and adds a new option to the array of options. This does work in Internet Explorer and is the more traditional Javascript way of adding options.
1 | var options = $('#example').attr('options'); |
2 | options[options.length] = new Option('Foo', 'foo', true, true); |
Using the final method above this last example shows how to replace the existing set of options with a new set, which may have been retrieved from an AJAX call or similar.
01 | var newOptions = { |
02 | 'red' : 'Red', |
03 | 'blue' : 'Blue', |
04 | 'green' : 'Green', |
05 | 'yellow' : 'Yellow' |
06 | }; |
07 | var selectedOption = 'green'; |
08 |
09 | var select = $('#example'); |
10 | var options = select.attr('options'); |
11 | $('option', select).remove(); |
12 |
13 | $.each(newOptions, function(val, text) { |
14 | options[options.length] = new Option(text, val); |
15 | }); |
16 | select.val(selectedOption); |
Lines 1 to 7 define the new options with an associative array and the one which will be selected. This is what might have been retrieved from an AJAX call.
Lines 9 and 10 cache a handles to #example and its options.
Line 11 removes all the existing options.
Lines 13 to 15 loop through the new options and add them to the select box.
And finally line 16 sets the selected option.
There are some alternative methods to adding options to a select box with jQuery using various plug-ins and I may look at these in a future post.
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
,
은평시립청소년수련관
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
 |  |  |
 |  |  |
 |  |
 |  |
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
- 홍반장
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
