이동단 css 호환 문제 귀납
6612 단어 이동단 css 호환 문제 귀납
var oHeight = $(document).height();//브라우저의 현재 높이KateX parse error: Expected'}', got'EOF'at end of input:...function() {if ((document).height() < oHeight) {$('#footer').css('position','static')}else{ $("#footer").css(“position”,“absolute”); } }); 웹 모바일단Fixed 레이아웃의 해결 방안에 관한 이 글도 괜찮다
http://efe.baidu.com/blog/mobile-fixed-layout/
5. 안드로이드 핸드폰이 메일박스를 인식하지 못하게 하기 6.iOS 식별 금지 긴 직렬 숫자는 전화 7.iOS의 각종 조작 창 팝업 금지 - webkit-touch-callout:none 8.transition 플래시 제거-webkit-transform-style:preserve-3d;/*3D 공간에서 내장된 요소를 설정하는 방법: 3D 보존 3D*/-webkit-backface-visibility:hidden;/*(변환할 요소의 뒷면이 사용자와 마주할 때 표시되는지 여부: 숨기기)*/9.iOS시스템의 중국어 입력법이 영어를 입력할 때 자모 사이에 6분의 1의 빈칸이 생길 수 있으며 정규를 통해this를 제거할 수 있다.value = this.value.replace(/\u2006/g, '');
10.ios와android 사용자의 텍스트 선택 금지 - 웹키트-user-select:none 11.ios와andriod에서 audio 요소와 비디오 요소는 대응 방안을 자동으로 재생할 수 없습니다: 터치스크린으로 재생합니다
$(‘html’).one(‘touchstart’,function(){ audio.play() }) 12.ios에서 input이 입력할 때 영문 알파벳의 기본 대문자를 취소합니다 13.android에서 음성 버튼 입력 취소 input:::- webkit-input-speech-button {display: none} 14 CSS 애니메이션 페이지 플래시, 애니메이션 카드
해결 방법: 1.가능한 한 합성 속성transform과opacity를 사용하여 CS3 애니메이션을 디자인하고position의left와top를 사용하여 위치를 정하지 않습니다 2.하드웨어 가속 켜기-webkit-transform:translate3d(0,0,0);moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
16.fixed 포지셔닝 결함 ios에서fixed 요소는 포지셔닝 오류가 발생하기 쉽다. 소프트 키보드가 튀어나올 때fixed 요소 포지셔닝에 영향을 주는android에서fixed 표현이 iOS보다 낫다. 소프트 키보드가 튀어나올 때fixed 요소 포지셔닝에 영향을 주지 않는다. iScroll 플러그인으로 이 문제를 해결한다.화면 회전을 막을 때 글꼴 크기를 자동으로 조정하는 html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6 {-webkit-text-size-adjust:none;18 Input의placeholder는 텍스트 위치가 빗나가는 상황이 나타날 수 있다. input의placeholder는 텍스트 위치가 빗나가는 상황이 나타날 수 있다. PC에서 line-height를 설정하는 것은 height가 맞출 수 있는 것과 같고 이동에서 여전히 빗나가는 상황이 나타날 수 있다. 해결은 line-height:normal을 설정하는 것이다.
19 왕복 캐시 문제는 브라우저의 리셋을 누르면 js가 자동으로 실행되지 않을 때가 있다. 특히 모바일 사파리에서는 그렇다.이것은 왕복 캐시 (bfcache) 와 관계가 있습니다.
해결 방법: window.function(){}; 20. calc의 호환성 처리 CSS3의calc 변수는 iOS6 브라우저에 -webkit-접두사를 붙여야 하며, 현재의 FF 브라우저는 -moz-접두사를 필요로 하지 않습니다.Android 브라우저는 현재 여전히 calc를 지원하지 않으므로 이전에 고정 크기를 추가합니다.
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } 21 iOS6의 위조 클래스: hover 이외의 요소는 유효하지 않습니다.Android에서는 유효합니다.유사하다
div#topFloatBar_l:hover #topFloatBar_menu { display:block; } 이러한 내비게이션은 iOS6에서 클릭하면 클릭 효과가 없고 클릭 탐지기를 늘려 요소에 클라스를 추가하고 줄여서 하위 요소를 제어할 수 밖에 없다.
22 모바일 단말기에서 보기 흉한 클릭의 하이라이트 효과를 수정하면 iOS와 안드로이드 모두 유효합니다.
하나의 CSS3의 속성을 더하면 관련 요소의 이벤트 감청이 효력을 상실하여 요소를'보이거나 켜지지 않게'하는 것과 같다.IE 는 11 에서 지원되기 시작했으며 다른 브라우저의 현재 버전은 기본적으로 지원됩니다.자세한 내용은 여기를 참조하십시오.https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none; 23. Zepto가 지적한 해결 방안인 Zepto의 tap은 문서에 연결된 터치 이벤트를 겸청하여 tap 이벤트의 시뮬레이션을 완성하고, tap 이벤트는 문서에 거품을 일으켜 촉발하며, 완료를 눌렀을 때의 tap 이벤트(touchstart\touchend)는 문서에 거품을 일으켜 촉발해야 하며, 문서에 거품을 일으키기 전에사용자 손의 접촉 화면(touchstart)과 떠나는 화면(touchend)은 클릭 이벤트를 촉발합니다. 클릭 이벤트가 지연 촉발되기 때문에 (이것이 바로 이동단이 클릭을 사용하지 않고 tap을 사용하는 이유입니다) (대략 300ms,safari의 더블 클릭 이벤트를 실현하기 위한 디자인) 탭 이벤트를 실행한 후 튀어나온 선택 구성 요소가 바로 숨겨집니다.이 때 클릭 이벤트가 지연된 300ms 중입니다. 300ms가 왔을 때 클릭은 완성된 것이 아니라 숨겨진 다음 아래의 요소입니다. 바로 아래의 요소가 연결된 클릭 이벤트가 있으면 터치합니다. 클릭 이벤트가 연결되지 않으면 클릭이 없지만 바로 아래에 있는 input 입력 상자(또는 select 선택 상자나 선택 체크 상자)가 있습니다.기본 포커스를 누르고 입력 키보드를 꺼내면 위에 비치는 현상이 나타난다.
fastclick를 도입합니다.js, 페이지에 다음과 같은 js 코드를 추가합니다
1 window.addEventListener( “load”, function() { 2 FastClick.attach( document.body ); 3 }, false ); zepto나 jQuery가 있는 js에
1 $(function() { 2 FastClick.attach(document.body); 3 }); 물론 리퀴어의 말은 이렇다.
1 var FastClick = require(‘fastclick’); 2 FastClick.attach(document.body, options); 프로젝트 2: tap 이벤트 대신 터치end를 사용하고 터치end의 기본 행동을 막는 preventDefault ()
1 $("#cbFinish").("touchend",function(event) {2//숨겨진 것 같은 3가지 이벤트.prevent.Default();4} 처리가 많음;프로젝트 3: 일정 시간 지연(300ms+)으로 이벤트 처리
1 $("#cbFinish").("tap",function(event) {2 setTimeout(function() {3//숨겨진 것 같은 많은 처리 4}, 320);5 });
1, 모양새 A, 페이지 높이 렌더링 오류
100% ， ， ， javascript ：
document.documentElement.style.height = window.innerHeight + ‘px’; B, 중첩 영역 강조
android ， ， CSS ：
-webkit-tap-highlight-color:rgba(0,0,0,0); 2. 행위 A, 이벤트가 트리거될 수 없음
android 、 ， ：-webkit-transform: translate3d(0,0,0) ， 。
B、:active
android 4.0 CSS :active ， touch （touchstart/touchend/touchmove） :
var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false); 3. A, 브라우저 충돌 적용
var act = function(){ window.removeEventListener(‘devicemotion’,act); }; window.addEventListener(‘devicemotion’,act,false); 해제 함수는 사건 처리 과정에서 샤오미 휴대전화의 위챗이 붕괴되는 것을 초래했다. 그러면 우리는 해제 시간을 사건 처리에 쓰지 않으면 된다.
B、 、
， 、 、 （webview）、 ， ， ， :
//play and pause it once
document.addEventListener(‘touchstart’, function () {
document.getElementsByTagName(‘audio’)[0].play();
document.getElementsByTagName(‘audio’)[0].pause();
}); C. 멀티 오디오를 동시에 재생할 수 없음
android , ， , ， android ， 。
D、
android 4.0 body(html) overflow:scroll ， :
1、 body(html) ， “ ”。
2、 iscroll、 js translate、scrollTop
4. 시스템/하드웨어 A, 괴이한 부상 양식
android ， input:password ， input:text -webkit-text-security: disc; 。
B、
， ， overflow:hidden ， ， ！
C、
webview android ， 。 target="_blank"' ， IOS android 。
D、Flex box
webview Flex box ， ， Flex box ， ， ， 3 Flex box 。 。
좋은 웹페이지 즐겨찾기
