예전에는 PC 쪽 작업을 하다 보면 호환성 문제도 겪곤 했는데, 솔직히 IE 문제만 생각나고 특별히 신경 쓸 게 없었기 때문이었을까. 요약을 잘 못했어요. 지금은 모바일 쪽에서 작업하고 있어서(원래는 모바일 쪽이 너무 쉽다고 생각해서 심각하게 받아들이지 않았거든요), 제가 틀렸어요, 경멸과 오만함의 대가를 치렀어요!
최근 몇 가지 호환성 버그가 발생하여 인터넷에서 정보를 찾았습니다.
먼저 뷰포트에 대해 이야기해 보겠습니다.
템플릿 우선
<meta charset=utf-8><!--주요 목적은 문서 너비와 장치 너비를 1:1로 유지하고 최대 너비는 1.0으로 유지하고 화면 크기 조정을 금지하는 것입니다. --><meta content=width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no name=viewport><!--이것은 전체 화면을 허용하는 iPhone 전용 라벨이기도 합니다. 브라우징. --><meta content=yes name=apple-mobile-web-app-capable><!--iPhone의 프라이빗 라벨, iPhone 상단의 상태 표시줄 스타일입니다. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--숫자를 전화번호로 자동 인식하지 않도록 설정하면 일련의 숫자가 표시되므로 더 유용합니다. 파란색과 마찬가지로 다른 색상에 스타일을 추가하는 것도 효과적이지 않습니다. --><meta content=telephone=no name=format-Detection><!--이메일 인식 비활성화--><meta content=email=no name=format-Detection>
배경이미지 작성시 좌측상단이나 0 0 을 추가하는 것이 가장 좋으며, 그렇지 않으면 모션효과 작성시 점프하기 쉽습니다.
복사 및 선택한 텍스트는 금지되어 있습니다.
.el { -webkit-user-select: 없음; -moz-user-select: 없음; -khtml-user-select: 없음;}Apple 휴대폰의 고정 위치에 버그가 있습니다. html과 본문에 Overflow-x:hidden이 설정되어 있는지 확인하세요.
화면 크기가 다양한 휴대폰에 특별한 스타일을 설정하세요.
@media 전용 화면 및 (최소 장치 너비: 320px) 및 (최대 장치 너비: 375px){}IOS에서는 입력 키보드 이벤트 keyup, keydown, keypress에 대한 지원이 좋지 않습니다. 그러나 Android 모바일 브라우저에서는 입력을 사용하여 키보드 keyup 이벤트를 모니터링할 수 있지만, iOS 모바일에서는 입력 방법을 사용하여 입력한 후에는 가능합니다. 브라우저에서는 키업이 즉시 응답하지 않습니다. 이벤트는 삭제 후에만 응답할 수 있습니다.
방법: html5의 oninput 이벤트를 사용하여 키업을 대체할 수 있습니다.
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /스크립트>iOS에서 입력 버튼 스타일 설정은 기본 스타일로 재정의됩니다.
해결책은 다음과 같습니다.
입력, 텍스트 영역 { 테두리: 0; -webkit-appearance: 없음;}Flex 레이아웃은 하위 버전의 Android에서는 flex-wrap:wrap 속성을 지원하지 않지만 iOS 시스템에서는 줄 바꿈 속성을 지원합니다. 이 문제를 해결하는 방법은 무엇입니까? 물론 줄 바꿈을 사용하지 말고 대신 다른 방법을 사용하십시오.
.box{ display: -webkit-box; /* 이전 버전 구문: Safari, iOS, Android 브라우저, 이전 WebKit 브라우저 */ display: -moz-box; /* 이전 버전 구문: Firefox(버기) */ 디스플레이: -ms-flexbox; /* 혼합 버전 구문: IE 10 */ display: -webkit-flex /* 새 버전 구문: Chrome 21+ */ display: flex /* 새 버전 구문: Opera; 12.1, 파이어폭스 22+ */}입력의 자리 표시자 속성은 텍스트를 위쪽으로 배치합니다.
line-height: (입력 상자와 동일한 높이) ---PC 솔루션
line-height: Normal ---모바일 솔루션
입력 유형=숫자 이후에는 PC 측에 위쪽 및 아래쪽 화살표가 나타납니다.
입력::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: 없음 !중요: 0;}Android 및 iOS 휴대폰을 활성화하여 카메라를 열고 사진 앨범 기능을 선택하세요.
<input class=js_upFile Cover1 type=file name=cover accept=image/* Capture=camera multiple/>$(function () { //브라우저의 userAgent를 가져와서 소문자로 변환 var ua = navigator.userAgent.toLowerCase( ) ; //Apple 휴대폰인지 확인합니다. 그렇다면 true입니다. var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture);위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.