1. Android 브라우저를 사용하여 배경 사진을 볼 때 일부 장치가 흐려집니다.
사진이 같은 비율의 PC에서는 매우 명확하지만 전화에서 매우 흐릿합니다. 이유는 무엇입니까?
연구 후, 문제를 일으킨 것은 DevicePixelratio였습니다. 휴대 전화의 해상도가 너무 작기 때문에 해상도에 따라 웹 페이지가 표시되면 단어가 매우 작습니다. 그래서 Apple은 처음에 웹 페이지에 iPhone 4의 960640의 해상도를 표시하므로 DevicePixelRatio = 2. 이제 Android는 1.5, 2 및 3으로 매우 지저분합니다.
사진을 휴대 전화에 더 명확하게 표시하려면 IMG 태그 대신 2 배 배경 이미지를 사용해야합니다 (일반적으로 2 회). 예를 들어, div의 너비와 높이는 100100이고, 배경 이미지는 200200이어야하고, 배경 크기 : coptoy;, 표시된 이미지가 명확 해집니다.
코드는 다음과 같습니다.
배경 : URL (../ 이미지/아이콘/All.png) 비 반복 센터 센터; -webkit-background 크기 : 50px 50px; 배경 크기 : 50px 50px; 디스플레이 : 인라인 블록; 너비 : 100%; 높이 : 50px;
또는 배경 크기를 지정하십시오 : 포함; 둘 중 하나, 시도해보세요!
2. 사진 로딩
느린 이미지 로딩 문제가 발생하면이 경우 휴대 전화 개발은 일반적으로 캔버스 방법을 사용하여로드합니다.
특정 캔버스 API는 http://javaScript.ruanyifeng.com/htmlapi/canvas.html을 참조하십시오
다음은 캔버스의 예입니다.
<li> <canvas> </canvas> </li>
JS는 동적으로 사진과 Li를로드합니다. 총 17 장의 사진이 제공됩니다!
var total = 17; var zwin = $ (창); var render = function () {var padding = 2; var winwidth = zwin.width (); var picwidth = math.floor ((winwidth-padding*3)/4); var tmpl = ''; for (var i = 1; i <= totla; i ++) {var p = 패딩; var imgsrc = 'img/'+i+'. jpg'; if (i%4 == 1) {p = 0; } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </canvas> </li>'; var imageObj = new Image (); imageObj.index = i; imageObj.onload = function () {var cvs = $ ( '#cvs _'+this.index) [0] .getContext ( '2d'); cvs.width = this.width; cvs.height = this.height; cvs.DrawImage (this, 0,0); } imageObj.src = imgsrc; }} render ();3. 모바일 웹 사이트가 IE 브라우저와 호환 될 필요가 없으면 일반적으로 Zeptojs를 사용합니다 . Zeptojs 내장 터치 이벤트 방법, http://zeptojs.com/#touch 이벤트를 참조하십시오.
이미 IE10 이상의 브라우저를 지원하는 새로운 버전의 Zeptio API를 살펴 보았으며 Zeptojs를 사용하도록 선택할 수 있습니다!
4. 휴대 전화에서 웹 페이지가 확대되고 축소되는 것을 방지합니다 . 이것은 가장 기본적인 지점입니다. 모바일 웹 사이트 개발자가 가장 많이 알아야 할 것은 메타에서 뷰포트를 설정하는 것입니다.
또한 일부 모바일 웹 사이트에서 다음과 같은 진술을 보았습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// wapforum // dtd xhtml mobile 1.0 // en" "http://www.wapforum.org/xhtml-mobile10.dtd">
DTD를 설정하는 방법은 XHTML입니다. 당사 페이지에서 html5를 사용하는 경우 DTD를 설정하지 않고 <! doctype html>을 직접 선언 할 수 있습니다.
뷰포트를 사용하여 페이지가 확대되지 않도록합니다. 일반적으로 페이지보기의 사용자 스케일링을 끄려면 일반적으로 사용자 규모를 0으로 설정합니다.
<meta name = "viewport"content = "user-scalable = 0" />
그러나 더 나은 호환성을 위해 전체 뷰포트 설정을 사용합니다.
코드 사본은 다음과 같습니다.
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0, 최대 규모 = 1.0, 사용자-규모 = 0" />
물론, 사용자-규모 = 0, 어떤 사람들은 또한 사용자-규모 = 아니오를 씁니다. 둘 다 괜찮습니다.5. Apple-Mobile-Web-Appail 가능
Apple-Mobile-Web-Appable은 웹 애플리케이션이 전체 화면 모드로 실행되는지 여부를 설정하는 것입니다.
문법:
<meta name = "Apple-Mobile-Web-Appable"컨텐츠 = "예">
설명 :
컨텐츠가 예로 설정되면 웹 응용 프로그램은 전체 화면 모드로 실행됩니다. 그렇지 않으면 그렇지 않습니다. 컨텐츠의 기본값은 아니오이므로 일반 표시를 나타냅니다. 읽기 전용 속성 창을 사용하여 웹 페이지가 전체 화면 모드로 표시되는지 여부를 결정할 수 있습니다.
6. 형식 탐지
형식 감지는 자동 인식 페이지에서 전화 번호를 활성화하거나 비활성화합니다.
문법:
<meta name = "형식 감지"내용 = "전화 = 아니오">
설명 :
기본적으로 장치는 전화 번호 일 수있는 모든 문자열을 자동으로 인식합니다. 전화 = 아니요이 기능을 비활성화 할 수 있습니다.
7. HTML5는 Android 또는 iOS의 다이얼링 기능을 호출합니다.
html5는 자동으로 전화 걸기를 호출하는 태그를 제공합니다. Tel : AD THE TAG AT THE TAG AT THE TAG 만 추가하십시오.
다음과 같이 :
<a href = "전화 : 4008106999,1034"> 400-810-6999 1034 </a>로 전환합니다
다음과 같이 직접 휴대 전화를 전화하십시오
<a href = "전화 : 15677776767"> 클릭하여 15677776767 </a>
8. HTML5GPS 위치 지정 기능
자세한 내용은 //www.vevb.com/post/html5_gps_getCurrentPosition을 참조하십시오
9. 스크롤 막대를 위아래로 당기면 갇혀 있거나 느리게
신체 {-webkit-overflow-scrolling : 터치; 오버플로 스크롤 : 터치;}Android3+ 및 iOS5+ 지원 CSS3 새로운 속성은 오버플로 스크롤입니다
10. 텍스트 복사 또는 선택은 금지됩니다
요소 {-webkit-user-select : 없음; -Moz-user 선택 : 없음; -khtml-user-select : 없음; 사용자 선택 : 없음;}모바일 장치에 대해 선택할 수있는 페이지 텍스트를 해결하십시오 (제품 요구에 따라 다름)
11. 페이지를 오랫동안 누르고 누르고 충돌합니다.
요소 {-webkit-touch-callout : none;}12. iPhone 및 iPad의 입력 상자의 기본 그림자
요소 {-webkit -appearance : 없음; }13. IOS 및 Android에서 요소를 터치 할 때 반투명 회색 마스크가 나타납니다.
요소 {-webkit-tap-Highlight-Color : RGBA (255,255,255,0)}알파 값을 0으로 설정하면 반투명 회색 마스크를 제거 할 수 있습니다. 참고 : Transparent의 속성 값은 Android에서 유효하지 않습니다.
다음 기사에는 http://www.vevb.com/post/phone_web_ysk가 있습니다
14. 활성 호환성 처리는 의사 클래스입니다. 활성 유효하지 않습니다
방법 1 : 본체에 ontouchStart를 추가하십시오
<body ontouchstart = "">
방법 2 : JS는 터치 스타트 또는 터치 엔드 이벤트를 바인딩하여 문서화합니다.
<style> a {color : #000;} a : active {color : #fff;} </style> <a herf = foo> bar </a> <script> document.addeventListener ( 'touchstart', function () {}, false); </script>15. 애니메이션 정의 3D는 하드웨어 가속을 활성화합니다
요소 {-webkit -transform : translate3d (0, 0, 0) 변환 : Translate3d (0, 0, 0);}참고 : 3D 변형은 더 많은 메모리와 전력을 소비합니다
16. 1px 망막 스크린의 경계
요소 {Border-Width : Thin;}17. WebKit 마스크 호환 처리
일부 저급 전화는 CSS3 마스크를 지원하지 않으며 선택적으로 다운 그레이드 될 수 있습니다.
예를 들어, JS 판단을 사용하여 다른 클래스를 참조 할 수 있습니다.
if (document.documentelement.style) {alert ( 'support mask');} else {alert ( 's suppressed mask');} if (webkitmask ';18. 화면 회전시 글꼴 크기 조정 문제
HTML, BODY, FORM, FIELDSET, P, DIV, H1, H2, H3, H4, H5, H6 {-webKit-Text-Size-Just : 100%;}19. 전환 플래시 화면
/3D 공간에서 내장 요소가 렌더링되는 방법 : 3D/-webkit-transform 스타일 보존 : Preserve-3D;/SET 사용자를 대면 할 때 변환 된 요소의 뒷면이 보이는지 여부 : hide/-webkit-backface-visibility : hidden;
20. 둥근 코너 버그
일부 안드로이드 폰은 둥근 모서리가 실패했습니다
배경 클립 : 패딩-박스;
21. 최상위 상태 바 배경색
<meta name = "Apple-Mobile-Web-App-status-bar 스타일"컨텐츠 = "Black" />
설명 :
Apple-Mobile-Web-App Capable을 처음 사용하여 전체 화면 모드를 지정하지 않으면이 메타 태그는 작동하지 않습니다.
컨텐츠가 기본값으로 설정되면 상태 표시 줄이 정상적으로 표시됩니다. 비워지면 상태 표시 줄은 검은 색 배경을 갖습니다. 공백 트랜스 슬루코센트로 설정되면 상태 표시 줄은 검은 반투명으로 나타납니다. 기본적으로 설정되거나 빈 상태로 설정되면 페이지가 상태 표시 줄 아래에 표시됩니다. 즉, 상태 표시 줄은 상단 부분을 차지하고 페이지는 하단 부분을 차지합니다. 둘 다 상대방에 의해 차단되지 않거나 차단됩니다. 빈 트랜스 슬루엔자로 설정되면 페이지가 화면을 채우고 페이지 상단이 상태 표시 줄로 덮여 있습니다 (페이지 높이를 20px로 커버하고 iPhone4 및 Itouch4의 망막 화면은 40px). 기본값은 기본값입니다.
22. 캐시를 설정하십시오
<meta http-equiv = "캐시 제어"컨텐츠 = "no-cache" />
모바일 페이지는 일반적으로 첫 번째로드 후에 캐시되며 각 새로 고침은 서버에 요청을 재현하는 대신 캐시를 사용합니다. 캐시를 사용하지 않으려면 캐시를 설정할 수 있습니다.
23. 데스크탑 아이콘
<link rel = "Apple-Touch-iCon"href = "t rel = "Apple-Touch-Icon"size = "152x152"href = "Touch-Icon-Ipad-Retina.png" />
iOS에서 다른 장치에 대해 다른 데스크탑 아이콘을 정의하십시오. 정의되지 않은 경우 현재 스크린 샷을 아이콘으로 사용하십시오.
위의 글쓰기 방법은 기본 광택이있는 것으로 생각 될 수 있습니다. 다음 설정 방법은 광택 효과를 제거하고 설계 도면의 효과를 복원 할 수 있습니다!
<link rel = "apple-touch-iCon-precomposed"href = "touch-icon-iphone.png" />
이미지 크기는 5757 (px)으로 설정할 수 있거나 Retina는 114114 (px)로 설정할 수 있고 iPad 크기는 72*72 (px)입니다.
24. 화면 시작
<link rel = "Apple-Touch-Startup-Image"href = "start.png"/>
iOS에서 페이지가로드되기 시작했을 때 표시되는 그림은로드 할 때 흰색 화면을 피하는 것입니다.
매트릭스를 통해 다양한 크기를 지정할 수 있습니다.
<!-iPhone-> <link href = "Apple-Touch-Startup-Image-320x460.png"media = "(Device-width : 320px)"rel = "Apple-Touch-Startup-Image" /> <!-iPhone Retina-> <link href = "Apple-Touch-Startup-Image-640x920.png"Media = "및 Width : 320PS). (-webkit-device-pixel-ratio : 2) "rel ="apple-t href = "Apple-Touch-Startup-Image-640x1096.png"> <!-iPad Portrait-> <link href = "apple-touch-startup-image-768x1004.png"media = "(Device-Width : 768px) 및 (Orientation : Portrait)" "Apple-Touch-Startup-Image" /> />. href = "Apple-Touch-Startup-Image-748x1024.png"media = "(Device-width : 768px) 및 (방향 : Landscape)"rel = "Apple-Touch-Startup-Image" /> <!-iPad RETINA Portrait-> <Apple-Touch-Startup-image-1536X2008.png "(Media =). 1536px) 및 (오리엔테이션 : 초상화) 및 (-webkit-device-pixel-ratio : 2) "rel ="rel = "Apple-Touch-Startup-Image" /> <!-iPad retina landscape-> <link href = "Apple-Startup-Image-1496x2048.png"(Device-Width : 1536px) 및 (devinition :). (-webkit-device-pixel-ratio : 2) "rel ="Apple-Touch-Startup-Image " />
25. 브라우저 개인 및 기타 메타
프로젝트에 다음 속성이 적용되지 않았으므로 다음을 테스트하기 위해 데모를 작성할 수 있습니다!
QQ 브라우저 비공개
전체 화면 모드
<meta name = "x5-fullscreen"content = "true">
강제 수직 스크린
<meta name = "x5-orientation"content = "portrait">
강제 수평 스크린
<meta name = "x5-orientation"content = "landscape">
응용 프로그램 모드
<meta name = "x5-page-mode"content = "app">
UC 브라우저 비공개
전체 화면 모드
<meta name = "Full-Screen"컨텐츠 = "예">
강제 수직 스크린
<meta name = "Screen-Orientation"Content = "Portrait">
강제 수평 스크린
<meta name = "Screen-Orientation"Content = "Landscape">
응용 프로그램 모드
<meta name = "browsermode"content = "application">
다른
핸드 헬드 장치, 주로 BlackBerry와 같이 뷰포트를 인식하지 못하는 일부 오래된 브라우저에 최적화
<meta name = "핸드 헬드 우호적 인"내용 = "true">
Microsoft의 오래된 브라우저
<meta name = "mobileOptimized"content = "320">
Windows Phone 하이라이트없이 클릭하십시오
<meta name = "msapplication-tap-highlight"content = "no">
26. iOS의 KeyUp, KeyDown 및 Keypress 지원은별로 좋지 않습니다.
문제는 다음과 같습니다. 퍼지 검색에 대한 입력 검색을 사용하고 키보드에 키워드를 입력 한 다음 Ajax 배경을 통해 쿼리 한 다음 데이터를 반환 한 다음 반환 된 데이터의 키워드를 표시합니다. 입력을 사용하여 안드로이드 모바일 브라우저에서 키보드 키 업 이벤트를 모니터링해도 괜찮지 만 iOS 모바일 브라우저에서는 매우 느리게 빨간색으로 변합니다. 입력 메소드를 사용하여 입력 한 후 KeyUP 이벤트는 즉시 해당하지 않습니다. 삭제 후에 만 해당 할 수 있습니다!
해결책:
HTML5의 OnInput 이벤트를 사용하여 KeyUp을 교체 할 수 있습니다.
<입력 유형 = "text"id = "testinput"> <script type = "text/javaScript"> document.getElementById ( 'testInput'). addEventListener ( 'input', function (e) {var value = e.target.value;}); </script>그런 다음 키 업과 같은 효과를 얻을 수 있습니다!
27. H5 웹 사이트 입력을 유형 = 숫자로 설정하는 문제
H5 웹 페이지의 입력 유형을 숫자로 설정하면 일반적으로 세 가지 문제가 발생합니다. 한 가지 문제는 MaxLength 속성을 사용하기 쉽지 않다는 것입니다. 다른 하나는 양식이 제출되면 기본적으로 반올림된다는 것입니다. 셋째, 일부 안드로이드 폰에는 스타일 문제가 있습니다.
문제가 해결되면 현재 JS를 사용하고 있습니다. 다음과 같이
<입력 유형 = "number"oninput = "checkTextLength (this, 10)"> 함수 checkTextLength (obj, length) {if (obj.value.length> length) {obj.value = obj.value.substr (0, length); }}질문 2는 양식 제출 기본값이 확인을위한 기본값, 단계 기본값은 1이고 단계 속성을 설정해야하기 때문입니다. 소수점 2 자리가 유지되면, 쓰기 방법은 다음과 같습니다.
<입력 유형 = "번호"step = "0.01" />
단계와 관련하여, 나는 여기에 간단한 소개를하겠습니다. 입력 유형 = 숫자에서 위와 아래 화살표는 일반적으로 자동으로 생성됩니다. 위쪽 화살표를 클릭하면 기본적으로 단계가 추가됩니다. 아래쪽 화살표를 클릭하면 기본적으로 단계가 줄어 듭니다. 기본 단계는 1입니다. 즉, Step = 0.01, 소수점 이하 2 자리를 입력하고 위와 아래 화살표를 클릭하여 각각 0.01을 증가시키고 0.01을 감소시킬 수 있습니다.
단계와 최소가 함께 사용되면 값은 최소와 최대 사이에 있어야합니다.
다음 예를 참조하십시오.
<입력 유형 = "번호"step = "3.1"min = "1" />
입력 상자에 어떤 숫자를 입력 할 수 있습니까?
먼저, 최소값이 1 인 경우 1.0을 입력 할 수 있고, 두 번째 값은 (1+3.1)를 입력하는 것입니다. 이것은 단계에 대한 간단한 소개입니다.
질문 3 : 기본 입력 스타일을 제거하십시오
입력 [type = number] {-moz-appearance : textfield;} input [type = number] ::-webkit-inner-spin-button, input [type = number] ::-webkit-outer-spin-button {-webkit-appearance : none; 여백 : 0;}28. iOS 설정 입력 버튼 스타일은 기본 스타일로 덮어 씁니다.
솔루션은 다음과 같습니다.
입력, TextArea {국경 : 0; -WebKit-Appearance : 없음; }기본 스타일을 없음으로 설정하십시오
29. iOS 키보드 문자 입력, 기본 초기 문자 대문자
해결책 : 다음 속성을 설정하십시오
<입력 유형 = "text"autocapitalize = "off" />
30. 드롭 다운 선택 오른쪽 정렬 세트를 선택하십시오
설정은 다음과 같습니다.
선택 옵션 {Direction : RTL;}31. 왜곡 변형은 변환을 통해 수행되며, 회전 회전은 재깅을 유발합니다.
다음과 같이 설정할 수 있습니다.
-webkit-transform : 회전 (-4deg) skew (10deg) translatez (0); 변환 : 회전 (-4deg) skew (10deg) translatez (0); 개요 : 1px 고체 RGBA (255,255,255,0)
32. 모바일 클릭 300ms 지연
300ms는 여전히 허용되지만 300ms로 인한 문제를 해결해야합니다. 300ms는 사용자 경험이 그리 좋지 않습니다. 이 문제를 해결하기 위해 일반적으로 탭 이벤트를 사용하여 모바일 측면의 클릭 이벤트를 대체합니다.
두 개의 J를 권장하고 하나는 Fast Click이고 다른 하나는 tap.js입니다.
300ms 지연은 http://thx.github.io/mobile/300ms-click-delay/를 참조하십시오.
33. 모바일 엔드 포인트 침투 문제
예는 다음과 같습니다.
<div id = "haorooms"> NOD 이벤트 테스트 </div> <a href = "www.vevb.com"> www.vevb.com </a>
DIV는 절대 포지셔닝 마스크이고 Z- 인덱스는 a보다 높습니다. A 태그는 페이지의 링크이며 탭 이벤트를 DIV에 바인딩합니다.
$ ( '#harooms'). on ( 'tap', function () {$ ( '#harooms'). hide ();});마스크 레이어를 클릭하면 DIV가 정상적으로 사라지지만 A 태그의 마스크 레이어를 클릭하면 링크 A가 트리거되고 포인트 스루 이벤트라고합니다.
이유:
터치 스타트는 터치 엔드 앞에 앞서 클릭합니다. 즉, 클릭 트리거링이 지연되고 이번에는 약 300ms입니다. 즉, 탭 트리거 후에 마스크가 숨겨져 있습니다. 현재 클릭이 트리거되지 않았습니다. 300ms 후 마스크가 숨겨져 있기 때문에 클릭 클릭은 아래 링크로 트리거됩니다.
해결하다:
(1) 터치 이벤트를 사용하여 클릭 이벤트를 교체하십시오. 예를 들어 터치 엔드 이벤트를 사용하십시오 (권장).
(2) FastClick, https://github.com/ftlabs/fastclick을 사용하십시오
(3) PreverDefault를 사용하여 태그 클릭을 차단하십시오.
(4) 이벤트를 처리하기 위해 특정 시간 (300ms+)을 지연시킵니다 (권장되지 않음)
(5) 위의 내용은 일반적으로 해결 될 수 있지만 실제로 작동하지 않으면 클릭 사건으로 대체됩니다.
다음은 다음과 같이 터치 엔드 이벤트입니다.
$ ( "#harooms"). on ( "touchend", function (event) {event.preventDefault ();});34. IE10에서 포크 번호를 제거하십시오
입력 : -ms-clear {display : none;}35. iOS 및 OS X에서의 글꼴 최적화와 관련하여 (수평 및 수직 스크린 등에는 일관성이없는 글꼴 대담이있을 것입니다).
iOS 브라우저가 조경되면 글꼴 크기가 재설정됩니다. 텍스트 크기 조정을 None으로 설정하면 iOS에서 문제를 해결할 수 있지만 데스크탑 버전에서 Safari의 글꼴 스케일링 기능은 유효하지 않으므로 최상의 솔루션은 텍스트 크기 조정을 100%로 바꾸는 것입니다.
-webkit- 텍스트 크기 조정 : 100%;-MS- 텍스트 크기 조정 : 100%; 텍스트 크기 조정 : 100%;
36. IOS 시스템에 대해서는 중국 입력 방법으로 영어를 입력 할 때 문자 사이에 1/6 공간이 나타날 수 있습니다.
정기적으로 제거 할 수 있습니다
this.value = this.value.replace (// u2006/g, '');
37. 모바일 HTML5 오디오 자동 재생 고장 문제
이것은 버그가 아닙니다. 웹 페이지에서 오디오 또는 비디오를 자동으로 재생하면 사용자에게 약간의 문제 또는 불필요한 트래픽 소비가 발생할 수 있으므로 Apple 및 Android 시스템은 일반적으로 JS를 사용하여 자동 재생 및 트리거 재생을 금지합니다. 플레이하기 전에 사용자가 트리거해야합니다.
솔루션 : 먼저 사용자 터치 스타트를 터치하고 재생을 트리거하고 일시 중지합니다 (오디오가로드를 시작한 다음 JS를 사용하여 다시 작동).
솔루션 코드 :
document.adeventListener ( 't
38. 모바일 html5 입력 날짜에서 자리 표시자가 지원되지 않는 문제
이것에 대한 좋은 해결책이 있다고 생각하지 않습니다. 다음 방법을 사용하십시오.
코드 사본은 다음과 같습니다.
<입력 자리 표시기 = "date"type = "text"onfocus = "(this.type = 'date')"id = "date">
일부 브라우저는 두 번 클릭해야 할 수도 있습니다!39. 일부 모델에는 유형 검색이있는 입력이 있으며 고유 한 버튼 스타일 수정 방법이 제공됩니다.
검색 입력 컨트롤의 일부 모델에는 닫기 버튼 (의사 요소)이 제공되며 일반적으로 모든 브라우저와 호환 되려면 직접 구현합니다. 현재 기본 닫기 버튼을 제거하는 방법은 다음과 같습니다.
#search ::-WebKit-Search-Cancel-Button {display : none; }기본 닫기 버튼을 사용하고 디자인 스타일을 준수하려면이 의사 요소의 스타일을 수정할 수 있습니다.
40. 확장 옵션을 장려하십시오
제프토 방법 :
$ (sltelement) .trrgger ( "Mousedown");
기본 JS 방법 :
함수 showdropdown (sltelement) {var event; event = document.createevent ( 'mouseevents'); event.initmouseevent ( 'Mousedown', True, True, Window); sltelement.dispatchevent (이벤트);};