연습 구덩이에서 발생하는 모바일 개발

1.input 자리 문제

크롬 때 [도]의 표시가 정상이지만, 실제 기계에서 [이미지] 내용 디버깅 모사 이동 측 명백한 매우보기 흉한 대해 어느 자리의

    

외국 사이트에서 입력 또는 설계 라인 높이는 라인 높이로 설정되어 있지 않은이 속성의 호환 처리 될 수있다 정상

그래도 약간 구글이 시뮬레이션에서 디버깅에 떨어져, 그것을 시도,하지만 "실제 기계"정상 수직 중심에 ~

2.line 높이

line-height종종 텍스트를 중심으로하는 데 사용, 다른 전화 디스플레이는 동일하지 않습니다. 도대체 -

크롬 시뮬레이터에 완벽하게 표시되지만! 그리고 각각의 IOS와 안드로이드는이 '오프셋'. 우리가하면 line-height1 픽셀의 추가 우리의 응용 프로그램의 사용자 IOS, 안드로이드 모델과 너무 많은 다른 모델의 대부분은, 그래서 유일한 차선책을 다른 표시하기 때문에, 아이폰 텍스트, 약간 '정상 표시'일 것이다. 라인 높이 호환성 문제없는 양호한 용액 용기의 작은 높이, 디스플레이 효과의보다 확실한 갭.

해결 방법 : 높이가 약간 큰, 그것은 두 플랫폼도 '이상한'표시되지 않습니다 라인 높이를 설정하는 높이 + 1 픽셀의 가장이다.

3. REM (호환성 : IE9 +)

원리 : 하이 브라우저의 기본 글꼴은 16px, 조정되지 않은 브라우저 화면 1em = 16px입니다.

REM 즉, 단지, REM 유닛에 사용되는 다른 원소 비율에 대응 배치 된 루트 요소의 폰트 크기를 설정할 필요가 루트 엘리먼트의 유일한 폰트 크기 상대적이고;

일반 사용 :

폰트 크기가 HTML 62.5 % 집합

html {    
    font-size: 62.5%;
}
body {    
    font-size: 12px;     font-size: 1.2rem; } p {     font-size: 14px;     font-size: 1.4rem; }

사용자 정의 스타일의 기본 컨트롤을 구현 (4)

선택 휴대 단말기 기본 스타일의 추한하지만, 기본 팝 스타일은 우리의 디자인의 원리와 일치하기 때문에

해결 방법 : 원래 투명, 높은 Z- 인덱스를 선택하도록 설정 ~ 다음 표면에 더 매력적인 스타일 '척'을 제공

innerHTML을 도면을 이용하여 이동 통신 단말기

innerHTML을 큰 세그먼트를 그리 사용하고, 사실, HTML 노드 ID를 얻을 수 종종 동적으로 생성 된 DOM을 발생합니다 덜이 문제의 싶어

이 블로거의 유물이 크롬에 움직이는 회전 목마 플러그 - 엔드, 매우 정상적인 브라우징을 썼다도하지만 실제 기계가 빈 하였다, 바이두의 모든 종류, 결국 구덩이 그래서 장소를 발견 ...

해결 방법 : HTML 구조와 직접하고 정직하게, 많은 방법을 시도 후, 더 나은 방법이 있는지, 내가 페이지에 알려 주시기 바랍니다.

6.300ms 지연

• 옵션 하나 : 사용 안 함 스케일링

다음 HTML 문서에서 헤더가 포함 meta레이블 :

<meta name="viewport" content="user-scalable=no"/> <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>

단점 - 완전히 비활성화 줌을 클릭하여 지연의 목적을 달성하지만, 완전히 줌이 우리의 의도하지하지 않도록 제거해야합니다, 우리는 너무 현재의 작업을 더블 클릭 여부를 확인하는 300ms를 기다리지 말고, 기본 크기 조정 동작을 두 번 클릭 금지하고 싶었다 .

• 옵션 2 : 변경 기본 뷰포트의 폭

<meta name="viewport" content="width=device-width"/>

상기 경우 meta브라우저는 사이트가 완료 적응 및 최적화를 끝으로 이동했다고 간주 할 수 있습니다 라벨, 그리고, 필요 줌 조작을 더블 클릭 없습니다.
이 프로그램의 혜택에 비해이 프로그램은 비활성화 스케일링 있지만 비활성화 브라우저의 기본을 두 번 클릭 스케일링 동작 완전하지를 않는다는 것입니다,하지만 사용자는 두 손가락으로 페이지 줌 조작을 확대 할 수 있습니다.

호환성 문제 :

옵션 1과 옵션 2의 경우, 크롬 지원하는 최초이며, 파이어 폭스는하지만, 사파리 두통을 만들, 다음에있는 더블 탭 줌 외에뿐만 아니라에서 두 번 클릭하여이 두 가지 경우에, 그것도 두 번 클릭 스크롤 할 수밖에 없다, 작업을 스크롤 비활성화 함께합니다.

침투를 클릭 (7)

문제의 일반적인 시나리오가 발생합니다 : 두 가지 요소는 A와 B 페이지가있는 경우 소자 B에 엘리먼트. 우리는 이벤트 touchstart의 B 요소의 콜백 함수 콜백 함수의 역할은 B 원소를 숨길 등록한. 우리는 우리가 B 요소를 클릭하면, B 요소가 숨겨져 있음을, 그 다음, 요소는 클릭 이벤트를 트리거 발견했다.

이는 이동 단말 브라우저, 사건의 순서가 있기 때문에 touchstart> touchend>을 클릭합니다.

는 B 요소 숨어 touchstart 이벤트가하는이 300ms 후, 브라우저에서 클릭 이벤트를 트리거하지만 B 요소가 없어이 시간이, 그래서 사건이 (가) 요소 본체에 배포 지연이 300ms,의 클릭 이벤트.

A는 경우,이 시간에 해당 페이지에 대한 링크가 예기치 않게 이동합니다.

해결 방법 :

1. 터치를 혼합하고 클릭하지 마세요

2. 소비 터치 한 후

해결 방법 :

1 만 페이지 내에서 모든 클릭 모든 터치 이벤트를 변경 터치 (touchstart, 'touchend', '탭') 참고 : JS에 뛰어 HREF 라벨도 클릭해야합니다.

숨겨진 요소 B 후 2. 최소 변화 --350ms

고정 요소 전위 8. 가상 키보드 결과

고정 요소는 표면에 DOM의 "모든"영향을주지 않습니다 가상 키보드, 가상 키보드,하지만 상단 뷰포트에서 그냥 "스틱"과 함께 나타납니다,하지만 고정 요소의 성능이 이상한 함께이되었다 이번에는 잘못 될 것이다.

원리를 해결 : 가상 키보드가 나올 때 고정 요소가 정적으로 설정, 가상 키보드 때 설정 다시 사라집니다.

해결 방법 : 검출 스크롤하거나 크기 조정 이벤트가 모두 약간의 지연이있을 것입니다 동안 가상 키보드가 아닌 던져 이벤트를 나타납니다 때,이 깜박입니다. 현재의 포커스 요소가 텍스트 요소 가져 오기, 요소는 고정 된 정적으로 설정됩니다.

제 단말기 제스처

화면에서 손가락을 슬라이드 ontouchstart : ontouchmove 손가락 잎 화면 : ontouchend 화면에 손가락

원리 :

1. touchstart 트리거 이벤트 녹화 시간 startTime을 손가락으로 누를 때,이 슬라이드를 초기 위치 initialPos.

2.하는 TouchMove 이벤트 트리거는, 현재 위치 nowPosition (실제 이동 요소)를 기록, 슬라이딩 거리 movePosition (현재 위치와 상기 초기 위치 initialPos 사이 nowPosition 차이) 다음 포지티브 또는 네거티브가 좌우로 결정되는 움직임의 수를 결정할 때.

3. 때 거리 movePosition 슬라이딩 touchend 트리거 이벤트 녹화 시간 핑거 잎 요지 화면의 화면 endTime- 사용자의 획득 시간 (startTime을 endTime- 사용자 -) 손가락

• 슬라이드 여부를 결정합니다 :

1. 이 300ms 이하의 체류 시간, 고속으로 슬라이딩되는 경우에 상관없이 슬라이딩 훨씬 거리가 다음 페이지로 모든 방법

2. 슬라이딩 거리는 '컨테이너의 크기와 비교하여 그 옆의'컨테이너 '의 1/3의 크기를 초과

10.iphone 동적으로 생성 된 HTML 요소를 클릭 실패

이것은 또한 매우 원리를 설명하지 않았다, 오랜 시간 동안 정보를 찾고, 구덩이의 마법이다.

해결 방법 : 커서를 클릭 바인딩 요소에 대한 CSS 스타일을 증가 : 포인터;

 

 

 

 

 

.