본문 바로가기
이것저것

모바일 반응형 제작시 참고사항, 참고사이트

by 멀바띠 2014. 7. 3.
728x90
반응형

CSS 코드 내부에서 분기하는 방법

출처: 나라디자인

CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다.

@media only all and (조건문) {실행문}

  • @media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
  • only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
  • all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
  • and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 ‘,’ 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다. OR 조건을 위한 콤마 ‘,’ 기호 사용시 유의점.
  • (조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 ‘and’ 키워드 또는 콤마 ‘,’ 기호로 연결해야 한다.
  • {실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.

CSS 코드 외부에서 분기하는 방법

조건문에 따라 별도의 외부 CSS 파일을 참조하여 분기하는 방법은 다음과 같다. 이 방식은 성능 최적화 측면에서 권장하지 않는다.

<link rel=”stylesheet” type=”text/css” media=”all and (조건A)” href=”A.css”>
< link rel=”stylesheet” type=”text/css” media=”all and (조건B)” href=”B.css”>

데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들면 창 크기를 조절해서 해상도를 바꿈)할 수 있기 때문에 웹 브라우저는 조건에 관계 없이 A.css 파일과 B.css 파일을 항상 요청한다. HTTP 요청을 불필요하게 두 번 발생시켜 이 페이지를 처음 로딩하는 사용자에게는 성능 저하의 원인이 된다. CSS 파일은 하나로 병합하고 CSS 코드 내부에서 조건 분기하는 방식을 권장한다.

미디어 쿼리 코드 템플릿

아래 코드는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류 했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 커버할 수 있다.

@charset “utf-8″;

/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

조건문이 될 수 있는 특징들

width / height

뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Example:

@media all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행

@media all and (width:768px), (width:1024px) { … } // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행

device-width / device-height

스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Example:

@media all and (device-width:320px) and (device-height:480px) { … } // 스크린 너비가 320px ‘그리고’ 높이가 480px 이면 실행

@media all and (min-device-width:320px) and (min-device-height:480px) { … } // 스크린 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행

orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.

  • Value: portrait | landscape
  • Applies to: bitmap media types
  • Accepts min/max prefixes: no

Example:

@media all and (orientation:portrait) { … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행

@media all and (orientation:landscape) { … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

aspect-ratio

뷰포트의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.

  • Value: <ratio>
  • Applies to: bitmat media types
  • Accepts min/max prefixes: yes

Example:

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행

@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행

@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

device-aspect-ratio

스크린의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.

  • Value: <ratio>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Example:

@media all and (device-aspect-ratio:5/4) { … } // 스크린 너비가 5, 높이가 4 비율이면 실행

@media all and (min-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이상이면 실행

@media all and (max-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이하면 실행

color

출력 장치의 색상에 대한 비트 수. 출력 장치가 컬러가 아닌 경우 ’0′의 값에 대응한다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (color) { … } // 출력 장치가 컬러를 지원하면 실행

@media all and (color:0) { … } // 출력 장치가 컬러가 아니면 실행

@media all and (color:8) { … } // 출력 장치가 8비트 색상이면 실행

@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면 실행

@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

color-index

출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 ’0′의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용하면 실행

@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행

@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원하면 실행

@media all and (min-color-index:256) { … } // 출력 장치가 256 이상 색을 지원하면 실행

@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원하면 실행

monochrome

출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 ’0′의 값에 대응한다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행

@media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행

@media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행

@media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행

resolution

출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.

  • Value: <resolution>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Example:

@media all and (resolution:96dpi) { … } // 1인치당 96개의 사각형 화소를 제공하면 실행

@media all and (min-resolution:96dpi) { … } // 1인치당 96개 이상의 화소를 제공하면 실행

@media all and (max-resolution:96dpi) { … } // 1인치당 96개 이하의 화소를 제공하면 실행

scan

TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.

  • Value: progressive | interlace
  • Applies to: “tv” media types
  • Accepts min/max prefixes: no

Example:

@media tv and (scan:progressive) { … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다

@media tv and (scan:interlace) { … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다

grid

출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 ’0′과 ’1′ 뿐이고 ’0′의 값은 비트맵 방식에 대응한다.

  • Value: <integer> 0 | 1
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: no

Example:

@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행

@media all and (grid:0) { … } // 출력 장치가 그리드 방식이 아니면 실행

@media all and (grid:1) { … } // 출력 장치가 그리드 방식이면 실행




단말기별 미디어쿼리 (media query)

출처: mulder21c.com

?
1
2
3
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes,
target-densityDpi=medium-dpi">


단말기별 미디어쿼리 - mulder21c.com 


화면 (viewport) 출처:http://html5.cafe24.com/source/mobile5_viewport.html

참고사이트 :
useragent
https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4&pli=1
android_dp_px_calculator
http://html.nhndesign.com/convention/mobile/mu.html

모바일을 처음 작업할때 가장 이해하기 힘든 부분이 viewport 이다. 해상도하고 겁나게 헷갈리게 된다.
나름 열심히 ppt로 정리해 보았습니다. viewport 정리문서

webkit 브라우저의 기본 가로사이즈는 : 980px
아이폰3 : 480 x 320
아이폰4 : 960 x 640 (iphone4가 iphone3의 해상도에 두배에 해당하지만 device-width/height 는 똑같이 320px/480px 입니다!!!)
아이패드 : 1024 x 768
옴니아2 : 800 x 480
갤럭시s : 800 x 480
갤럭시탭1 : 1024 x 600
갤럭시탭2 : 1280 x 800

사파리브라우저 (ipop, iphone, ipad) 관련 :
ipop, ipone, ipad 는 <meta name="viewport" content="width=device-width;" /> 로 설정시 해당기기의 width 값으로 설정되지만 
내용의 크기에 맞처서 scale 값이 로딩/가로세로변환 시 변경되면서 화면에 내용이 꽉차보임. 때문에 scale 변경값을 브라우저가 임의로 조정하지 않도록 아래와 같이 세팅할 필요가 있음
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />

안드로이드폰, dolfin : 
안드로이드 폰에서는target-densitydpi=medium-dpi;라는 설정이 추가된다.
이 설정은 기본값이 "medium-dpi" 이기때문에 추가하지 않아도 되지만 넣어놓은 싸이트들이 많으니 있으나 없으나 신경 끄면됨.
< meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=medium-dpi;" />

options for "target-densitydpi"
- device-dpi : use the device's native dpi as target dpi.
- low-dpi : 120dpi
- medium-dpi : 160dpi, which is also the default as of today
- high-dpi : 240dpi
: we take any number between 70 and 400 as a valid target dpi.


오페라브라우저: 
< meta name="viewport" content="width=device-width; initial-scale=0.75; maximum-scale=0.75; minimum-scale=0.75; user-scalable=no;" />

lgt뷰어: 
이!! 브라우저는!!! body에 width값 480 || 800 으로 화면에 맞게 세팅해주지 않으면 매우 넓은 화면을 기본값으로 잡음.
viewport를 선언하나마나 아마 변화도 없지만 기본으로 세팅
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=medium-dpi;" />



polaris: 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=medium-dpi;" />

기타: 
< meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=medium-dpi;" />

?
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
// 네이버 분류방법
var da_ua = window.navigator.userAgent.toLowerCase();
var da_br = "";
 
if ( /windows ce/.test( da_ua ) && /polar/.test( da_ua ) ) {
    da_br = "WM_POLARIS_LGT";
     
} else if ( /mozilla/.test( da_ua ) && /natebrowser/.test( da_ua ) ) {
    da_br = "POLARIS_SKT";
 
} else if ( /opera/.test( da_ua ) && (/windows ce/.test( da_ua ) || /skt/.test( da_ua )) ) {
    da_br = "OPERA";
 
} else if ( /iphone/.test( da_ua ) || /ipod/.test( da_ua ) ) {
    da_br = "SAFARI";
 
} else if ( /android/.test( da_ua ) ) {
    da_br = "ANDROID_WEBKIT";
 
} else if ( /dolfin/.test( da_ua )) {
    da_br = "DOLFIN";
 
} else if ( /windows ce/.test( da_ua ) && /iemobile/.test( da_ua ) ) {
    da_br = "IE";
 
} else if ( /mozilla/.test( da_ua ) &&  /(wv[0-9]+)/.test( da_ua ) && /lgtelecom/.test( da_ua ) ) {
    da_br = "LGT_WEBVIEWER";
 
} else if ( (/mozilla/.test( da_ua ) && /((010|011|016|017|018|019)\d{3,4}\d{4}$)/.test( da_ua )) ){
    da_br = "POLARIS_LGT";
 
} else {
    da_br = "OTHERS";
}




Media Queries for Standard Devices

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
 
 
 
/* target retina screens 레티나 스크린 ----------- */
 
@media only screen and (min-width: 320px) {
  /* Small screen, non-retina */
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {
  /* Small screen, retina, stuff to override above media query */
}
 
@media only screen and (min-width: 700px) {
  /* Medium screen, non-retina */
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {
  /* Medium screen, retina, stuff to override above media query */
}
 
@media only screen and (min-width: 1300px) {
  /* Large screen, non-retina */
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {
  /* Large screen, retina, stuff to override above media query */
}




애플 샘플 CSS 열기

웹킷동작 설정


?
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
html {
    -webkit-text-size-adjust:none
    /* 텍스트사이즈 고정
     auto:기본, none: 크기변환막기, n%: 지정된사이즈로 변경 */
     
    -webkit-touch-callout:none;
    /* 길게누를때 전화번호 동작 막기 */
     
    -webkit-user-select:none;
    /* 사용자 요소 선택여부 설정
      auto:기본, none: 모든요소선택, text: 텍스트만 선택 */
 
    -webkit-user-drag:none;
    /* 자동드래그 비헤이비어 여부
     auto:기본, element: 전체요소드레그, none: 드레그 불가 */
 
   -webkit-tap-highlight-color:rgba(0,0,0,0);
   -webkit-focus-ring-color:rgba(0, 0, 0, 0);  
   /* 포커스 아웃라인 제어 */
 
   -webkit-user-modify: read-write-plaintext-only;
   /* 요소의 내용을 편집할 수 있는지 여부 지정
    read-write, read-only, read-write-plaintext-only */
 
   -webkit-text-fill-color:#333
   /* 텍스트 컬러 지정 */
 
   -webkit-text-security:circle
   /* 비밀번호 대체모양
    circle, disc, none, square */
 
   -webkit-rtl-ordering:logical
   /* ltr, rtl 혼합텍스트 기본처리 재정의
    logical, visual */
 
}







출처: 바로가기

메타태그활용

?
1
2
3
4
5
6
7
8
9
10
11
12
<meta name="format-detection" content="telephone=no"><!-- 전화번호 자동링크 -->
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=5.0,
 minimum-scale=1.0, width=device-width"><!-- 자동축소 제한 -->
<meta name="apple-mobile-web-app-capable" content="yes"><!--  상태바제거 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
/*
앱에서 구현되는 zoom같은 확대 기능
maximum-scale=1.0   --> maximum-scale=5.0
5배 까지 확대됨, 숫자는 자유~  */


모바일접속시 자동이동

?
1
2
3
4
5
6
7
8
9
10
var mobilePhones = new Array('iphone', 'ipod', 'android', 'blackberry', 'windows ce',
'nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');   //기기종류 나열
 
for (var i = 0; i < mobilePhones.length; i++) {
    if (uAgent.indexOf(mobilePhones[i]) > -1){
       document.location.replace("http://" +location.host+ "/url");
       //히스토리 없이 페이지 이동
       //document.location = "url";    //히스토리 남음
     }
}


모바일 화면 터치로 드래그 막기

?
1
2
3
4
5
6
7
8
9
10
  $(".btn_toggle").toggle(
   function(){
    $('body').bind('touchmove', function(e){e.preventDefault()});  
     // 터치 이벤트를 없앤다.
   },
   function(){
    $('body').unbind('touchmove');   // 터치 이벤트 실행한다.
   }
  );
<div class="btn_toggle">버튼</div>


상단 URL Bar 없애기

?
1
2
3
4
5
6
7
8
9
10
11
12
addEventListener('load', function(){
 setTimeout(hideAddressBar, 0);
}, false);
function hideAddressBar(){
 window.scrollTo(0, 1);
};
 
//또는
 
setTimeout(function(){ if (window.pageYOffset == 0) { window.scrollTo(0,1); } }, 50);
 
// 문제점 : 둘다 세로 스크롤이 있는 긴 페이지여야만 된다.



출처: http://dohoons.com

키보드 입력시 검색창에 포커스하기 (jQuery)

포털의 검색결과 페이지에서는 키보드 입력시 
자동으로 검색창에 포커스가 가게 되어 빠르게 검색할 수 있도록 하고 있습니다.
이와 같은 기능을 jQuery 로 구현해봤습니다.
(수정 110525 : 붙여넣기(Ctrl+V) 시 검색창에 붙여넣기 되도록 추가)


?
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
$(document).ready(function() {
    var target_input = $('#keyword'); // 포커스 인풋
    var chk_short = true;
  
    $(document).bind("keydown keyup", function(e) {
        var key = e.keyCode;
        var tg = e.target;
        if(tg.tagName == "INPUT" ||  tg.tagName == "TEXTAREA") return true;
          
        var specific = key >= 8 && key <= 46;
        if(e.type == "keydown") {
            if(specific) {
                chk_short = false;
                return true;
            }
            if(!specific && chk_short) {
                target_input.focus().select();
                //target_input.focus().select(); return false;
            }
            if(e.ctrlKey && e.keyCode == 86){
                target_input.focus().select();
            }
        } else {
            if(specific) {
                chk_short = true;
            }
        }
    });
      
    $("input, textarea").bind("blur", function() {
        chk_short = true;
    });
});

이렇게 하면 현재 포털사이트들과 같은 동작을 합니다.
이 상태로는 영어단어를 빠르게 검색할때 편리하며 주로 한글단어로 검색하는 경우엔 
target_input.focus().select(); 부분을 
target_input.focus().select(); return false; 으로 바꿔서 쓰는 것이 사용성이 좋을 것입니다.



모바일 터치 swipe 정보

swipejs.com/ 
dohoons.com



터치스타트 터치엔드

출처블로그

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
document.addEventListener("touchstart", touchMoveHandler1, false);
document.addEventListener("touchend", touchMoveHandler2, false);
document.addEventListener("touchmove", touchMoveHandler3, false);
 
//  touchstart 에서 x 좌표값을 저장해두었다가
//  touchend 에서의 x 좌표값과 비교하여 오른쪽 swipe  인지 왼쪽 swipe인지 체크
 
 var touchX;
 
function touchMoveHandler1(e){
 
 // 다시 취소 e.preventDefault(); 를 해주니깐 스크롤이 안먹는다.
//그래서   touchmove 이벤트 추가하여 좌표값 비교해서 처리
 
 // e.preventDefault(); 
// 이거 안해주니깐 안드로이드 4.0.4 에서  touchend  이벤트 안먹어서 멘붕옴... ㅠ ㅠ
 
  var touch = e.touches[0] || e.changedTouches[0];
  touchX = touch.pageX;    //e.touches[0].clientX;
}
 
function touchMoveHandler2(e){
 
  var touch = e.touches[0] || e.changedTouches[0];
  var moveX = touch.pageX; //e.originalEvent.changedTouches[0];
 
    var gap;
 
    if(moveX > touchX)
        gap = moveX - touchX;
    else
        gap = touchX - moveX;  
 
    if (gap > 50) {
        if(moveX > touchX){
    //오른쪽
    //alert("right = "+touchX+" : "+moveX);
    }else{
    //왼쪽
    //alert("left = "+touchX+" : "+moveX);
    }
    }
}
 
 
function touchMoveHandler3(e){
 
    var touch = e.touches[0] || e.changedTouches[0];
    var chX = Math.abs( touchX - touch.pageX );
    var chY = Math.abs( touchY - touch.pageY );
    //alert("move : " + chX +" , "+ chY );
 
// 좌표가 좌우로 더 많이 움직였을때만  preventDefault 이벤트 추가
if (chX > chY ) {
isPrevent = true;
} else {
isPrevent = false;
}
 
//alert(isPrevent);
 
    if (isPrevent) {
        e.preventDefault();
       } else {
          this.moved = true;
      }
  }
 
// 크기로만 비교하니깐 클릭이벤트랑 겹쳐져서 잘 안먹어서
//나는 좌표값이 50 바뀔때마다 이벤트가 적용되는 방식으로 바꿨다.

테스트 다 끝났는데 안드로이드 4.0.4 에서 안먹어서 당황
e.preventDefault(); 해주니깐 touchend 이벤트 먹는다...
안드로이드 브라우저 버그라는데... 모르겠다
http://gitagy.tistory.com/70 여기가면 간단히 설명해준다..
* 무조건 e.preventDefault(); 먹이면 스크롤 안먹음..... 
오늘 삽질의 끝을 달린다...
헉..



jQuery UI Touch Punch

보기: jQuery UI Touch Punch




HTML5 Webapp too wide on iPad with iOS7? 아이폰어플 웨뷰 뷰포트 에러 수정 출처

I ran into a very nasty issue with iOS7 on an iPad today: My webapp would render way too wide, causing scrollbars, where it would fit perfectly on older iOS versions.
Turns out that the culprit is in the meta-viewport tag.
This is what I had:

?
1
2
3
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
//This is what it needs to be to make it work on iOS7:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">

All you need to do is remove the width parameter. Makes total sense right? But it works!




jQuery parallax

http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/



728x90
반응형
저작자표시 비영리 변경금지

'이것저것' 카테고리의 다른 글

css 핵  (0) 2014.10.22
CSS, CSS3 정보 활용  (0) 2014.07.03
피규어샵 콜렉터몰 쇼핑몰 사기 사건  (27) 2012.09.17
운세상담 잘보는 곳 리뷰 - 신바람점집운세  (10) 2012.09.07
24인용 군용텐트설치 혼자서 가능할까? - slr클럽 텐트대첩  (28) 2012.08.31

관련글

티스토리툴바